HTML5 - 在<a> Firefox问题中包含<li>？

Question

我这样做的时候......

<li>
    <a href="#">
      <img src="#" width="#" height="#" alt="#" />
      <ol class="#">
        <li>#</li>
        <li>#</li>
        <li>#</li>
      </ol>
    </a>
 </li>   

它像Firefox一样在Firefox中渲染...

 <li>
    <a href="#">
      <img src="#" width="#" height="#" alt="#" />
    </a>
      <ol class="#">
      <a href="#"></a>
        <li>a href="#">#</a></li>
      <a href="#"></a>
        <li>a href="#">#</a></li>
      <a href="#"></a>
        <li>a href="#">#</a></li>
      </ol>
    <a href="#"></a>
 </li>     

似乎在Webkit中正确呈现.有任何想法吗？

Answer 1

尽管HTML5现在允许<a>元素包含块级元素(例如ol),但Firefox的解析器传统上不接受,而是将它们转换为<a>块级元素内部的单独序列,这样它们只包含内联级元素,这就是你看到.

因为Firefox是唯一一个主要的浏览器制作者,Mozilla人员接受了HTML5的更改,同意改变他们的解析器以允许<a>元素包装块内容.(这只是HTML5的许多解析器更改之一,尽管它似乎可能是最重要的一个)

这种变化发生在Firefox 4中,所以你不会在那里看到问题,但Firefox 3.x仍然使用旧的行为.

解决方法,包括使用<div>带有onclick属性而不是使用on <a>,并使用JavaScript将块包装在<a>元素中,但是没有非JS解决方案.鉴于(a)页面应该仍然可用,并且(b)Firefox 3.x应该在不太遥远的未来消亡,一个合理的选择就是接受现在的奇怪的Firefox 3行为.