<li>内<a>内的<h3>奇怪的Firefox行为

Question

我有一个搜索结果列表，其中我将 h3放在li内的锚点 中

<li>
  <a href="https://www.stackoverflow.com/">
    <h3>h3 within anchor within li</h3>
  </a>
</li>

测试：

• Chrome，Safari和Opera =>没问题
• Firefox和Firefox dev Edition =>奇怪的行为

请参见下图

为什么Firefox这样渲染上面的代码？

注意：

  

未应用样式

Answer 1

如果您将元素具有默认的display: block;属性：val（{<h3>）里面元素具有display: list-item;属性：val ...就是这样布局呈现。

（更不用说<a>标记了，我相信它是默认的display: inline;。

您可以通过添加css h3{display: inline;}来避免/改善它，但那还不是语义HTML。 （列表项不应包含标题-或另一种方式：内联元素）

顺便说一下，这就是我在Mac OS X 10.14.6的Chrome版本77.0.3865.90（正式版本）（64位）中看到的样子：