Question

当我这样做时......

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

似乎在Webkit中正确呈现。有什么想法吗？

Answer 1

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

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

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

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

Answer 2

<a>标记的默认样式为display:inline;，这使其不适合包含块级元素。

但是，您可以通过将<a>元素的显示属性更改为block或inline-block来解决此问题，具体取决于您希望它显示的方式。

（我注意到你正在使用HTML5，所以你会没事的。请注意，在xhtml中，根本不允许将块级元素包含在<a>标记内。这不会在这种情况下会影响你，但是如果你需要使用带有xhtml文档类型的代码，那就值得知道了）

HTML5 - 在<a> Firefox problem?</a> </li>中附上<li>

2 个答案: