2

HTML5 允许将链接包裹在块元素（一个或多个）周围，但它在旧浏览器中究竟会如何呈现呢？假设可以追溯到 IE6。

我还没有找到完整的细节（但有一些例子）。

标记如下：

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

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

我注意到即使是现代浏览器（例如 iOS 6 上的 Safari）也会做一些奇怪的事情。例如，尝试从您的移动浏览器单击此 JSFiddle 中的图像——即使它与下面的标题共享链接，但标题并没有为我突出显示。此外，单击标题时，图像或标题都会突出显示。

4

2 回答 2

2

放宽 HTML5 中的内容模型a是基于对实际浏览器行为的观察：最初的句法要求并没有真正强制执行。可以预期这会尽可能地进行。（我在 IE 6 和 Firefox 3 上对此进行了测试。）

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

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

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

于 2012-12-09T08:51:20.457 回答
2

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

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

是的，如果我想符合旧的 HTML 文档类型，我会这样做以保留语义。不过，它不是 HTML5 一致性所必需的，因为它的工作原理是假设即使是旧浏览器也已经以这种方式运行（向后兼容性和一切）。

于 2012-12-09T00:00:46.310 回答