Question

在IE 10中，我有一个相对定位的包装div与一些内容（图像/文本）。在div内部是一个绝对定位的锚标签，其定位为“覆盖”整个包装div。它有一个z-index集。因此，包装器div内的整个区域应该是可点击的。但是，只有包装器div中没有内容的区域才是可点击的。整个包装div可以在除IE 10之外的所有其他浏览器中单击。这是一个小提琴：http://jsfiddle.net/NUyhF/3/。帮助

<div class="wrapper">
    <div class="imgWrapper">
        <img src="http://www.google.com/images/srpr/logo4w.png" />
    </div>
    <p>Here is some text</p>
    <a href="#"></a>
</div>

.wrapper { position : relative; width: 500px; height: 300px; }
.wrapper a { position: absolute; top: 0px; width: 500px; height: 300px; z-index: 2; }

Answer 1

现在，在块标记中包含块级元素（使用html5 doctype）在语义上是正确的。我建议修改你的标记。

<强> HTML

<a href="#">
    <div class="imgWrapper">
        <img src="http://www.google.com/images/srpr/logo4w.png" />
    </div>
    <p>Here is some text</p>
</a>

Answer 2

我发现这是一段令人烦恼的IE特征已经有一段时间了，为了解决这个问题，我必须制作一个透明图像并将其用作锚标记的背景：

background:url(transparent1x1.gif) repeat;

http://jsfiddle.net/NUyhF/6/

IE10锚标签z-index问题

2 个答案: