html - 绝对定位的 anchor 标记(无文本)在 IE 中不可点击

Question

我有两个绝对定位在图像顶部的 anchor ，链接在其他浏览器(Chrome、FF、Safari)中可点击，但在 IE 中不可点击(目前已在 8 和 9 中测试)

奇怪的是，如果我给链接一个 background-color 它们是可点击的，但是如果 background-color 设置为 transparent(这就是我想要的)它们不再可点击，我也尝试设置 zoom:1 但没有成功。我猜想 IE 中的 hasLayout 位随 IE 8/9 一起消失了，所以猜测 zoom 现在对于此类问题并不重要。

有什么想法可以让这些链接在 IE 8/9 中显示为透明背景？

这是我一直在使用的 fiddle :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 x 1px 的透明 PNG(或 GIF)并在你的背景声明中使用它，如下所示:

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

希望这对您有所帮助。

PS - 不要为此指定任何实际的背景颜色。只需使用上面的示例，它应该可以工作。

除此之外，尝试将您的 anchor 标记设置为显示为 block ，或许还可以在其中插入一个不间断的空格(因为此时它们是空的，这可能会使 IE 崩溃):

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

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