Question

HTML5 allows用于包含块元素（一个或多个）的链接，但它在旧版浏览器中的呈现方式究竟如何呢？让我们说回到IE6。

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

标记如下：

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

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

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

Answer 1

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

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

是的，如果我想要符合较旧的HTML文档类型，那就是我如何保留语义。然而，它不是HTML5一致性所必需的，因为它基于这样的假设，即使旧的浏览器已经采用这种方式（向后兼容性和所有内容）。

Answer 2

放宽HTML5中a的内容模型是基于对实际浏览器行为的观察：原始语法要求并未真正实施。这可以预期到你可以得到。（我在IE 6和Firefox 3上对此进行了测试。）

因此不需要兼容性。但分裂链接元素肯定不是“语义”。对于“语义”的任何合理语义，两个链接在语义上与一个链接不同。这也是一个可用性问题，尤其是在使用键盘在链接之间移动时。

视觉呈现是另一个问题。从HTML5草案或实际考虑因素来看，根据它可能包含几乎任何内容的链接应该在不同的状态下呈现的方式尚不清楚。这可能是旧语法要求背后的关键原因。浏览器不会始终如一地呈现此类链接。这至少适用于下划线。也可能存在功能差异;例如，在某些浏览器上，标题文本右侧的区域不可点击，即只有文本是“活动的”，而其他浏览器则生成元素的整个区域（默认情况下，标题的整个可用宽度））“活跃”。

因此，如果您希望使用这样的链接，基本问题是考虑如何在CSS中以合理的跨浏览器方式呈现它以及如何在CSS中执行此操作。

块元素周围的链接如何在旧浏览器中翻译？

2 个答案: