标题嵌套段落：直接页面与iframe中渲染表现差异的原因探究

这种差异是浏览器错误恢复机制在不同文档上下文下的行为区别导致的，核心在于HTML规范的约束，以及浏览器容错逻辑的优先级变化：

1. 先明确代码的违规点 #

HTML规范中，<h1>这类标题元素的内容模型仅允许「短语内容」（行内元素、纯文本等），而<p>是块级元素，完全不允许嵌套在<h1>内部。你的代码属于非法嵌套，浏览器必须启动错误恢复逻辑来处理这类不符合规范的结构。

2. 直接页面的“宽容”容错策略 #

当浏览器直接加载该违规页面时，错误恢复逻辑会优先保证视觉呈现的连贯性：它会妥协性地保留内容结构，不拆分标题，将<p>当作<h1>的子元素进行渲染。这是浏览器为兼容大量历史遗留的不规范代码所做的让步，避免用户看到完全混乱的页面布局。

3. iframe中的“严格”错误校正 #

而在iframe这个独立的文档上下文里，浏览器的容错优先级发生了变化：它会更严格地遵循规范，处理「块级元素嵌套进短语内容容器」的错误。一旦检测到<h1>内部出现<p>，就会自动闭合<h1>标签，将<p>移到标题外部，也就是你看到的最终结构：

<h1></h1><p>Lorem<br>Ipsum</p>

这样设计的原因在于，iframe通常用于嵌入第三方内容，严格的错误校正能降低嵌入内容破坏主页面布局的风险，因此浏览器在这里更倾向于按规范修复错误，而非优先兼容视觉效果。

内容的提问来源于stack exchange，提问作者Tim Greller