html - 在IE中可点击整个图像

我正在研究一个项目，当您将其悬停时，应单击它。它适用于所有浏览器。但是由于某种原因，它确实可以在IE中工作

现场演示：
http://jewelbeast.com/imghover/rounded.html

HTML：

<div class="vertical-smallborder">
    <section>
        <img src="http://placehold.it/400x600" />
        <div class="text">
            <span>
                <h1>This is a title</h1>
                <p>This is an example of a description.</p>
                <p>The entire image is a link!</p>
                <a class="entire" href=""></a>
            </span>
        </div>
    </section>
</div>

CSS：

div.vertical-noborder section span a.entire{
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

我希望有人知道这个问题。

最佳答案

您的代码肯定比需要的复杂得多-除非出于某些原因需要绝对定位元素，否则就不应该。

我相信IE中的代码中有两种不良行为：


div中的Margin-left: -250px将元素推出屏幕
元素的z-index将img放在a标记上方。 （link）


与其尝试修复IE中的这些错误，不如重写将img包装在a标记中的内容。

关于html - 在IE中可点击整个图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18192857/