Foxmail与浏览器渲染<li>嵌套<p>差异及HTML渲染规范问询

问题场景 #

给定HTML代码片段：

<ol>
  <li><p>XXX</p></li>
  <li><p>XXX</p></li>
</ol>

• 现代浏览器渲染效果：正常有序列表，每个列表项包含内容XXX
• Foxmail渲染效果：列表编号与内容被拆分为独立段落，呈现为：

  1.
  XXX
  2.
  XXX
  

1. 为何Foxmail与浏览器渲染行为不同？ #

核心是渲染引擎和设计目标的差异：

• 现代浏览器采用Blink、Gecko这类遵循最新HTML/CSS标准的引擎，能正确识别<li>作为列表容器的语义，即使内部嵌套<p>这类块级元素，也会保留列表项的结构完整性，不会拆分编号和内容。
• Foxmail这类邮件客户端，要么沿用旧版渲染内核（比如早期的Trident），要么为了兼容大量历史遗留的非标准邮件代码，采用了简化且保守的解析逻辑：它会把<p>判定为独立的顶级块元素，直接从<li>容器中拆分出来，导致编号和内容分离。

2. 是否有规范明确HTML渲染行为？ #

有明确的官方规范：
W3C制定的HTML系列标准（HTML4至HTML5）以及CSS列表、盒模型模块规范，都明确规定<li>作为列表项容器，允许嵌套<p>等块级元素，渲染时应当保持列表项的结构完整性，编号与对应内容属于同一个列表项，不得拆分。
只是邮件客户端的设计优先级是兼容旧代码而非严格遵循最新标准，所以会出现偏离规范的情况。

3. 此问题是否为Foxmail特有？ #

不是Foxmail独有的问题，这类现象在大量旧版或保守型邮件客户端中普遍存在：
比如旧版Outlook（使用MSHTML引擎）、部分国产邮件客户端，甚至一些web邮箱的旧版渲染逻辑，都会出现块级元素嵌套列表项时的结构拆分问题。本质是邮件渲染生态和浏览器不同——浏览器追求标准一致性，而邮件客户端需要适配各种非标准的历史邮件代码，因此解析逻辑存在明显差异。

内容的提问来源于stack exchange，提问作者负 熵