html - block 元素周围的链接如何在旧版浏览器中翻译？

Question

HTML5 allows让链接包裹在 block 元素(一个或多个)周围，但它在旧版浏览器中究竟会如何呈现？假设可以追溯到 IE6。

我还没有找到完整的详细信息(但有 some examples )。

标记如下:

<a href="http://example.com">
  <section>
    <h3>Heading</h3>
    <p>Text</p>
  </section>
</a>

此外，使其在旧版浏览器中兼容的最语义化的方法是将链接分别包装在每个 block 元素内吗？我看到过用 span 替换 block 元素的建议，但这会使其内联并改变标题的含义。

---

我注意到即使是现代浏览器(例如 iOS 6 上的 Safari)也会做一些奇怪的事情。例如，尝试 clicking on the image in this JSFiddle从您的移动浏览器 - 即使它与下面的标题共享链接，该标题也不会为我突出显示。此外，当单击标题时，图像和标题都会突出显示。

Answer 1

据我所知，其行为通常与现代浏览器相同。给出的示例标记中的所有内容都将变成单个超链接。这与您是否包含 HTML5 shiv 无关。让旧的 IE 能够识别新的语义元素。

这可能是因为 HTML 中没有任何内容表明特定的起始标记应自动关闭未关闭的 <a>标签 — 需要结束标签来表示超链接的结束。

是的，如果我想遵循旧的 HTML 文档类型，我就会这样做来保留语义。不过，它并不是 HTML5 一致性所必需的，因为它的工作原理是基于这样的假设:即使是较旧的浏览器也已经以这种方式运行(向后兼容性等)。