在 IE 中可点击整张图片答案

【问题标题】：Entire image clickable in IE在 IE 中可点击整张图片
【发布时间】：2013-08-14 02:39:39
【问题描述】：

我正在处理一个项目，当您将其悬停时，您应该单击它。它在所有浏览器中都能完美运行。但由于某种原因，它在 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%;
}

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

【问题讨论】：

为什么要这么复杂？只需将所有内容包装在 A 标记中，而不是试图用绝对定位来伪造它。 HTML5 允许锚点包裹块级元素。

标签： html css image internet-explorer

【解决方案1】：

您的代码肯定比它需要的复杂得多——除非出于某种原因您需要绝对定位元素，否则您不应该这样做。

我认为您在 IE 中的代码中有两种不良行为：

div 中的Margin-left: -250px 将元素推到屏幕外
元素的z-index 将img 放在a 标记之上。 (link)

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

【讨论】：