HTML5 – 包含在Firefox中的问题？

我这样做的时候……

<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中正确呈现.有任何想法吗？

解决方法

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

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

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

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