firefox - <a> 可以包含 HTML5 中的 &lt;footer&gt; 吗？

Question

我的结构如下:

<a href="#">
  <footer>
    <p>Some text</p>
    <h2>A Heading</h2>
  </footer>
</a>

这在除 Firefox 3.6 之外的所有浏览器(甚至是带有 HTML5shiv.js 的 IE6)中都按预期工作和显示。在 Firefox 3.6 中，显示完全乱七八糟，如果您使用 Firebug 检查 DOM，<footer>元素为空，本应在其内部的元素却在其外部。

所有标签都正确关闭。 <a>设置为 display:block在 CSS 中。

W3C 验证器验证文档并且不会将此结构标记为不正确。

规范指出 <a>当元素包含其他流内容时，它可能被归类为流内容。 <footer>是流量内容。

难道只是 Firefox 3.6 没有完全正确地呈现 HTML 吗？

有任何修复的想法吗？

你好!

Answer 1

根据W3C HTML5 Reference Footer Elements内容模型是:

Flow content, but with no heading content descendants, no sectioning content descendants, and no footer element descendants.

a元素是interactive content .(也可以是 Flow Content )

因此，如果您根据 HTML5 标准对其进行验证，则使用 a 元素将进行验证。使用类似 W3C validator 的东西.

所以回答你的问题，FireFox 3.6 不完全符合 HTML5 标准。 FireFox 4.0 比 3.6 更好。您可以找到旧版浏览器支持哪些 HTML5(和 CSS3)元素的列表 here .

至于修复，我建议您从 Firefox 中隐藏页脚，并显示一个包含您的内容的 div，除了 firefox 之外，其他所有内容都是隐藏的。我将使用 jQuery CSS Browser Detection using jQuery instead of Hacks 完成此操作是一个很好的起点。