在IE中无法点击的绝对定位锚标签（没有文字）

Question

我有一个绝对位于图像顶部的两个锚点，这些链接可以在其他浏览器（Chrome，FF，Safari）中点击，但不能在IE中点击（到目前为止在8＆amp; 9中测试）

奇怪的是，如果我给链接background-color它们是可点击的，但是如果background-color设置为transparent（这就是我想要的）它们不再可点击，我也尝试设置zoom:1但没有运气。我猜IE中的hasLayout位消失了IE 8/9所以现在猜测zoom对于这类问题无关紧要。

制作这些链接的任何想法都会在IE 8/9中以透明的bg显示出来吗？

以下是我一直在使用的小提琴：jsFiddle example

我有以下HTML布局：

<div id="content">
    <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" />

    <div id="countdown"></div>

    <a id="link1" href="http://www.stackoverflow.com" title="link1"></a>
    <a id="link2" href="http://www.stackoverflow.com" title="link2"></a>
</div>

和CSS：

body {text-align:center;}
#content {position:relative; width:724px; height:300px; margin:0 auto;}

#countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;}

#link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;}
#link2 {position:absolute; width:200px; height:35px; bottom:20px; right:0;}

Answer 1

我之前遇到过这个问题，它一直让我感到很生气。我不知道为什么会这样，但我总是创建一个1px的1px透明PNG（或GIF）并在你的背景声明中使用它，如下所示：

a { background: url("/path/to/image.png") 0 0 repeat; }

希望这有帮助。

PS - 不要用此指定任何实际背景颜色。只需使用上面的例子就可以了。

除此之外，尝试将锚标记设置为显示为块，也可以在其中插入一个不间断的空格（因为它们目前是空的，可能会使IE绊倒）：

a { display: block; background: url("/path/to/image.png") 0 0 repeat; }

<a href="#">&nbsp;</a>

Answer 2

你可以使用上面提到的background-image技巧来做到这一点。如果您不想为此使用透明图片，只需在图片网址中使用未知方案或about:blank。

a { background-image: url("iehack:///"); }

或

a { background-image: url("about:blank"); }

至少在IE 8 + 9（我测试的唯一IE）以及当前版本的Firefox和Chrome中都有效。它仍然是有效的CSS，不会导致额外的流量。使用jquery时，第一个“hack”可能会在Chrome（以及其他人）中出现JS错误。由于about:blank文档的MIME类型错误，后者仅（但肯定）在Chrome中提供MIME类型警告。

Answer 3

移植自我前一段时间发表的评论。

稍长一点，但仍然没有流量，基础64编码透明gif：

background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICR‌​AEAOw==')

这有其自身的优点/缺点，但可能有用。也：

background-color: rgba(0,0,0,0)

我最近使用过这个

Answer 4

@ tw16提到invisible的评论让我想到了opacity。

将IE的filter:alpha(opacity=0)与background-color:#fff（或任何颜色）结合起来似乎是一个很好的解决方案。测试并在IE 7-9中工作（6由于某种原因没有应用不透明度过滤器，但我不需要支持6因此这将起作用）

1x1图像解决方案具有全局效果，所以我要给他检查。

感谢您的回答。

Answer 5

我遇到了同样的问题。我的工作解决方案是为适当的锚添加边框。像下面的例子。一个优点是，您不需要额外的图像。

a { border-right: 1px solid transparent }

Answer 6

IE有一个讨厌的习惯，即当他们没有任何内容时，不要让链接按预期工作。要解决此问题，请为每个链接指定 内容。

要尝试的另一件事是在链接上设置display: block;以使IE将它们作为块级元素而不是内联元素流动。这也可以帮助您将链接设置为空。