本文揭示了 ... 这类非法 HTML 结构在主页面与 iframe 中表现不一致的根本原因——并非浏览器行为差异，而是 iframe 内容经 PHP 代理（使用 DOMDocument 解析/重写）后被自动修正为符合规范的结构。
本文揭示了 `
...
` 这类非法 HTML 结构在主页面与 iframe 中表现不一致的根本原因——并非浏览器行为差异，而是 iframe 内容经 PHP 代理（使用 DOMDocument 解析/重写）后被自动修正为符合规范的结构。在 HTML 规范中，<p></p> 元素不允许作为 <h1></h1>～<h6></h6> 的子元素（参见 HTML Living Standard § 4.3.6）。因此，以下标记本质上是无效的：
<h1><p>Lorem<br>Ipsum</p></h1>
尽管现代浏览器（Chrome、Firefox、Safari、Edge）在直接渲染该代码时会采用“容错解析”（tag soup parsing），将 <p></p> 视为 <h1></h1> 的内容并视觉上正常显示（实际 DOM 中可能仍保留嵌套关系），但这纯属浏览器的修复行为，并非标准支持。
真正导致 iframe 中行为突变的关键，在于内容加载方式：当页面通过 PHP 代理服务 提供给 iframe 时（例如用于跨域资源注入、动态 base 标签插入或 CSS 注入），该代理常使用 DOMDocument::loadHTML() + saveHTML() 对原始 HTML 进行解析与序列化。而 DOMDocument 是一个严格遵循 HTML 规范的解析器，它会在 loadHTML() 阶段自动纠正非法嵌套——将 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转">Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转</a>
<p>实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。</p>
</div>
<a href="/xiazai/skill11244" title="Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 从 <h1></h1> 中剥离，生成等效于：
立即学习“前端免费学习笔记（深入）”；
<h1></h1> <p>Lorem<br>Ipsum</p>
这一过程完全发生在服务端，浏览器接收到的已是“修复后”的合法 HTML，因此 iframe 中呈现的是符合规范的结构化结果。
✅ 正确做法：避免语义错误嵌套
应始终使用语义合规的结构。若需换行与强调结合，可选择：
- 使用
<br>直接置于 heading 内（合法）：<h1>Lorem<br>Ipsum</h1>
- 或用 CSS 控制排版（推荐语义清晰方案）：
<h1>Lorem Ipsum</h1> <style>h1 { white-space: pre-line; }</style>
⚠️ 注意事项：
- 不要依赖浏览器的容错行为编写 HTML；验证工具（如 W3C Validator）会明确报错；
- 使用
DOMDocument、jsdom、或任何基于标准解析器的服务时，均会强制规范化 HTML，导致“看似相同但实际被重写”的现象； - 调试 iframe 渲染差异时，务必检查实际响应 HTML 源码（而非开发者工具中渲染后的 DOM），确认是否经过服务端处理。
归根结底，这不是 iframe 的特殊性，而是解析器层级的差异：浏览器渲染引擎宽容，而 DOM 解析器严谨。理解这一分界，是构建健壮、可维护前端架构的重要一课。
