1

我有一个问题应该很简单，但处理起来却非常令人沮丧。首先，我想声明我正在尝试在浏览器之间实现最大的兼容性，并希望尽可能使这个 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 应该最终解决了很多问题。

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

谢谢！

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

4

1 回答 1

1

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

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

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

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

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

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

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

于 2013-04-28T08:14:51.353 回答