用图片和标题标签超链接块区域的正确方法

Question

我有一个问题，应该足够简单，但却非常令人沮丧的处理。首先，我想声明的是，我正在尝试实现浏览器之间的最大兼容性，并希望在可能的情况下使其符合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>标签;

Answer 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类中以更改光标，使其表现得像一个链接。