Firefox HTML5-封闭<；李>；在<；a>；火狐问题？

当我这么做的时候

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

它在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>     

a href=“#”>#
a href=“#”>#
a href=“#”>#

似乎在Webkit中正确渲染。有什么想法吗？

标签的默认样式为

显示：inline使其不适合包含块级元素

但是，您可以通过将
元素的显示属性更改为
块
或
内联块
来解决此问题，具体取决于您希望它的显示方式

（我注意到您使用的是HTML5，所以您不会有问题。请注意，在xhtml中，不允许在
标记中包含块级元素。在这种情况下，这不会影响您，但如果您必须使用带有xhtml doctype的代码，则值得了解）
尽管HTML5现在允许
元素包含块级元素（例如
ol
），但Firefox的解析器传统上并不接受这一点，而是将它们转换为块级元素内部的一系列独立
，这样它们只包围内联级元素，这就是您看到的

因为Firefox是唯一一家这样做的主流浏览器，Mozilla的人接受了HTML5的改变，同意改变他们的解析器，允许
元素包装块内容。（这只是HTML5的众多解析器更改之一，尽管它可能是最有希望的更改）

这种变化发生在Firefox4中，因此您不会看到问题所在，但Firefox3.x仍然使用旧的行为

解决方法包括使用带有onclick属性的
而不是
，以及使用JavaScript将块包装在
元素中，但没有非JS解决方案。考虑到（a）页面应该仍然可用，以及（b）Firefox 3.x应该在不久的将来消亡，一个合理的选择就是现在接受Firefox 3古怪的行为。
+1但是，不要摆弄
内联块
，IMO的一个更好的方法是在每个
@Pekka中放置
，语法上你可能是对的，但是如果目的是让整个列表成为一个单一的超链接，那么从语义上来说，原始代码更好，而语义就是HTML5的全部内容。（另外还需要更多的标记！；））同意-如果OP真的对HTML5标记很认真的话！（编辑：好的，它也在标题中，所以这是一个安全的假设。）添加显示块或内联块似乎并不能解决这个问题。它仍然把每一个元素都封装在一个标记中。这并不能在FF 3.6中解决它。Spudley的答案真的解决了你的问题吗？对我来说，这看起来不正确-我认为这是一个解析问题，不是样式问题。不，不是。它仍然将每个元素包装在一个标记中，但现在有了额外的样式。考虑到最终结果的描述方式，@Alohci可能有道理。我在您发布的初始代码中没有看到任何语法错误，但是您可以给我们一个到您实际代码的链接，或者提供一个JSFIDLE示例来演示它？在FF4中对我来说效果很好：我知道，劣质标记，但它已经很好地说明了这一点。@Alohci-感谢您的解释。如果这是旧版本Firefox上的解析问题，我很乐意让它保持原样。