整个图像可在IE中单击

Question

我正在研究一个项目，当你将鼠标悬停时，你应该点击它。它适用于所有浏览器。但出于某种原因，它在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%;
}

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

Answer 1

你的代码肯定比它需要的更复杂 - 除非你需要绝对定位元素的某些原因，你不应该。

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

div中的
1. Margin-left: -250px正在将元素推离屏幕
2. z-index元素将img置于a标记之上。 （link）

不要试图修复IE中的这些错误，而是重写img标记中包含a所需的内容。