包裹在跨度中时未显示链接上的 IE6 背景图像答案

【问题标题】：IE6 Background Image on link not shown when wrapped in span包裹在跨度中时未显示链接上的 IE6 背景图像
【发布时间】：2011-02-13 10:54:01
【问题描述】：

我在 IE6 中有问题，但在 IE>=7、FF 或 Chrome 中没有。这是当你用跨度包装锚标签时引起的。

<span><a href="place"><span>Text</span></a></span>

但这是可行的：

<h1><a href="place"><span>Text</span></a></h1>

它们的唯一样式如下：

div#headeraffiliate a.skin_3 {
    width: 550px !important; height: 53px !important;
    background: transparent url('images/logo_skin3.gif') top left no-repeat !important;
}

div#header a#logo span,
div#headeraffiliate a#logo span {position: absolute; margin-left: -1000em;}

div#header a#logo,
div#headeraffiliate a#logo {
    display: block;
    width: 297px; height: 69px;
    z-index: 1000;
    position: absolute; left:0; bottom:0;
    background: transparent url('images/logo.gif') top left no-repeat;
}

【问题讨论】：

标签： html css internet-explorer internet-explorer-6

【解决方案1】：

我相信这里的区别在于 H1 标签是块级元素，而 span 是内联元素。如果您使用<span style="display:block">，它可能会起作用

【讨论】：

感谢这完美地修复了它。我实际上添加了行 div#header div#headeraffiliate span { display: block; }。我知道这会影响所有跨度，但似乎工作正常。

【解决方案2】：

我怀疑这是原因：

div#headeraffiliate a#logo span {position: absolute; margin-left: -1000em;}

它将您的链接定位在屏幕外。

【讨论】：

当然，这应该只是定位跨度内部跨度而不是锚点。