绝对定位的锚标记（无文本）在IE中不可点击

我在图片的绝对位置上放置了两个锚点，这些链接在其他浏览器（Chrome，FF，Safari）中都是可单击的，但在IE中是不可单击的（到目前为止已在8和9中进行了测试）

奇怪的是，如果我给链接一个background-color可单击的链接，但是如果将链接background-color设置为transparent（这就是我想要的），它们将不再可单击，我也尝试设置zoom:1但没有运气。我猜想hasLayoutIE 8/9中IE的功能已经消失了，所以zoom现在对于这类问题的猜测已经不重要了。

有什么想法可以使这些链接以透明的bg出现在IE 8/9中吗？

这是我一直在使用的小提琴：jsFiddle示例

我有以下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;}

我以前遇到过这个确切的问题，它总是使我烦恼。我不确定为什么会这样，但是我总是创建一个1px x 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>

您可以使用上述background-image技巧来做到这一点。当您不想为此使用透明图像时，只需使用未知方案或about:blank在图像URL中使用即可。

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类型警告。

从我前一段时间发表的评论中移植而来。

基于64编码的透明gif稍长一点，但仍然没有流量。

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

这有其优点/缺点，但可能很有用。也：

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

我最近用了这个

@ tw16的评论invisible让我开始思考opacity。

将IEfilter:alpha(opacity=0)与background-color:#fff（或任何颜色）似乎是一个很好的解决方案。经过测试并可以在IE 7-9中正常工作（由于某些原因6未应用不透明度过滤器，但是我不需要支持6，因此可以使用）

1x1图像解决方案具有全局效果，因此我将把支票交给他。

感谢您的回答。

我有同样的问题。我的工作解决方案是在适当的锚点上添加边框。像下面的例子。优势之一是，您不需要额外的图像。

a { border-right: 1px solid transparent }

IE有一个讨厌的习惯，即当链接没有任何内容时，它们不会使链接正常工作。要解决此问题，请为每个链接提供一个 内容。

尝试尝试的另一件事是设置display: block;链接，以使IE将其作为块级元素而不是嵌入式元素流动。如果您需要链接为空，这也可以有所帮助。