使用图像和标题标签超链接块区域的正确方法答案

【问题标题】：Proper way to hyperlink a block area with an image and header tag使用图像和标题标签超链接块区域的正确方法
【发布时间】：2013-04-28 16:14:51
【问题描述】：

我有一个问题应该很简单，但处理起来却非常令人沮丧。首先，我想声明我正在尝试在浏览器之间实现最大的兼容性，并希望尽可能使这个 HTML5 兼容。

我要做的是创建一个块区域链接，其中包含一个 img 和一个 h3 标签。

不久前我最初的尝试是执行以下操作：

<div class="link-block">
   <a href="#">
      <img>
      <h3>Title</h3>
   </a>
</div>

虽然（据我所知）根据 HTML5 规范在锚标记中包含标头标记是有效的，但在处理旧版本的 Internet Explorer 时会导致一个奇怪的问题，因为该链接并不总是可点击的。（但是，这个问题可能是由于该站点的结构略有不同）

现在，另一方面，我想我会做一个稍微不同的想法，应该以更向后兼容的方式实现相同的事情，那就是做这样的事情：

<div class="link-block">
   <a href="#"></a>
   <img>
   <h3>Title</h3>
</div>

CSS 标记为：

.link-block{
   position: relative; 
}
.link-block a{
   width: 100%; height: 100%; display: block;
   position: absolute; top: 0; left: 0; 
}

这在我尝试过的所有浏览器（Opera、Firefox、Chrome、Safari）中都运行良好——除了 Internet Explorer。我正在用 IE10 尝试它，它决定——无论何时你将鼠标悬停在该区域上——唯一可点击的区域是图像或 h3 标签未覆盖的区域。

我上面的第二种方法在技术上无效吗？我知道 IE 在正确显示内容时往往会遇到很多问题，但我认为 IE10 应该最终解决了他们的很多问题。

实现我想要做的事情的正确方法是什么？

谢谢！

编辑：我还应该注意我已经玩过<a> 标签的z-index，以及<h3> 和<img> 标签；它仍然给 IE 带来同样的问题。

【问题讨论】：

在a 元素中仅使用img 和h3 有什么问题？请具体说明：哪些浏览器针对哪些特定标记和 CSS 表现出哪些问题行为？您认为为什么需要 div 包装器，它与问题有何关系？
问题出在 IE 中，当它处于兼容模式时，导致该块的某些区域无法点击。周围的 div 只是为了更接近我的代码
那就不要把IE设置成兼容模式。而原来的问题还不清楚。请提供一个独立的示例，并确定哪个块的哪个特定部分在哪个版本的 IE 中不可点击。

【解决方案1】：

我认为您在这里面临两个问题。首先，一些较旧的浏览器（主要是旧的 IE），无论对错，都会在遇到块元素时隐式关闭所有内联元素。在这种情况下，您的第一次尝试将被解释为：

<div class="link-block">
   <a href="#"><img></a>
   <h3>Title</h3>
</div>

这根本没用。解决方案是在A 标签上使用display:block。

第二个问题是，一些浏览器（同样，主要是 IE），这一次大多是错误的，假设如果你在可见元素上放置一个不可见元素，你将希望与可见元素而不是不可见元素进行交互。这使得第一个问题的解决方案变得多余，并导致您的第二个解决方案出现问题。

我的建议是完全忘记A 标签，而是使用父DIV 的onclick 事件：

<div class="link-block" onclick="document.location.href='#';">
    <img>
    <h3>Title</h3>
</div>

您还可以将cursor: pointer; 添加到link-block 类以更改光标，使其表现得像一个链接。

【讨论】：