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

Question

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

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

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

这是我一直在使用的小提琴: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;}

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图像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类型警告.

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图像解决方案具有全局效果,所以我要给他检查.

谢谢你的回答.