1

在 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; }
4

2 回答 2

3

现在将块级元素包装在锚标记中在语义上是正确的（使用 html5 文档类型）。我建议修改你的标记。

HTML

<a href="#">
    <div class="imgWrapper">
        <img src="http://www.google.com/images/srpr/logo4w.png" />
    </div>
    <p>Here is some text</p>
</a>
于 2013-03-27T15:51:07.040 回答
1

一段时间以来，我发现这是 IE 的一个令人讨厌的特性，为了解决它，我必须制作一个透明图像并将其用作锚标签的背景：

background:url(transparent1x1.gif) repeat;

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

于 2013-03-27T15:36:22.920 回答