嵌套块元素为何导致Firefox与Chrome的列表标记对齐差异？

测试代码 #

<ul>
  <li>
    <a href="/"><div>test</div></a>
  </li>
</ul>

浏览器渲染对比 #

问题 #

上述代码在Firefox和Chrome中渲染效果存在差异：Firefox里锚点元素与列表标记未对齐，Chrome中则保持对齐状态。已知<div>是块级元素，请问该差异的原因是什么？

原因解析 #

这种差异源于两大浏览器对列表项内块级元素布局规则的不同实现：

• Chrome针对「行内元素<a>嵌套块级元素<div>」的场景做了兼容性优化，会自动调整<a>的布局行为，将其作为可容纳块级子元素的容器，同时保留列表项的默认对齐逻辑，让列表标记与锚点内容自然对齐。
• Firefox的布局逻辑更贴近早期CSS规范中「行内元素不能包含块级元素」的处理规则（尽管现代CSS规范已允许此类嵌套），当<a>中出现块级<div>时，Firefox会触发特殊布局，使<a>被块化后脱离列表项的默认对齐上下文，最终导致与列表标记错位。

内容的提问来源于stack exchange，提问作者Matthieu Riegler