修复了在Firefox＆gt; = 3.5中使用锚标记包装块内容的问题

Question

历史上只允许锚标记包含内联内容。

HTML5特别允许锚标记包含块级内容，现代版本的Opera / Chrome / Safari正确实现了这种行为，但Firefox没有。

此问题之前已由others on SO确定，可能最好的解决方法是仅在锚标记内包含默认内联标记，然后在CSS中将它们设为display:block，但这不允许使用锚点内新的html5标签。

有没有人有特定于Firefox的修补程序，允许在Firefox中正确呈现以下内容？

<a href="some/page.html">
   <article>
      <section>
         <p> Lorem ipsum... </p>
      </section>
      ...
   </article>
</a>

如果有更好的方法来构建html以实现相同的目标，那将是理想的，但基于CSS的解决方案甚至是vanilla Javascript解决方案都会很棒。

显然有很多方法可以使用Javascript和div将onclick点击作为链接，但这会隐藏链接目标并丢失标记的一些语义值。

Answer 1

只需使用一些不显眼的javascript将onClick处理程序添加到锚元素，其中display：block包含块元素。不要编辑HTML5。

仅供参考，这是在Firefox 4测试版中修复的（实现了完整的HTML5解析器。）

Answer 2

破解此方法的一种方法是使用span元素将内容包装在锚点内。所以你的代码看起来像这样：

<a href="some/page.html">
   <span>
       <article>
          <section>
             <p> Lorem ipsum... </p>
          </section>
          ...
       </article>
    </span>
</a>

当然，这不再是有效的HTML5，但是如果你真的需要让它工作，那么这个黑客应该这样做。