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

Question

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

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

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

这是我一直在使用的小提琴：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 - 不要为此指定任何实际的背景颜色。只需使用上面的示例，它应该可以工作。

除此之外，尝试将您的锚标记设置为显示为块，并可能还在其中插入一个不间断的空格（因为它们目前是空的，这可能会导致 IE 崩溃）：

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

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

Answer 2

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

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

Answer 3

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

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

1x1 图像解决方案是全局效果，所以我将把支票交给他。

感谢您的回答。

Answer 4

您可以使用提到的background-image 技巧来做到这一点。当您不想为此使用透明图像时，只需在图像 URL 中使用未知方案或 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-Type 错误，后者仅（但肯定）在 Chrome 中给出 MIME-Type 警告。

Answer 5

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

a { border-right: 1px solid transparent }

Answer 6

改编自我前段时间发表的评论。

有点长，但仍然没有流量，base 64 编码的透明 gif：

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

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

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

我最近用过这个