DOCTYPE前置字符触发怪异模式、未闭合标签在Blink与WebKit中补全行为不同、HTML5语义标签在旧浏览器中不被识别，这三处解析差异导致跨浏览器DOM结构不一致。
不同浏览器对同一份 HTML 文档结构的解析结果不一致，不是因为你漏写了某个标签，而是内核在「解析阶段」就走上了不同路径。关键差异集中在 DOCTYPE 处理、标签容错补全、HTML5 语义标签识别这三处——改代码不如先搞清解析器怎么“读”你的文件。
DOCTYPE 前置字符触发怪异模式（Quirks Mode）
只要 <!DOCTYPE html> 前面多一个空格、BOM 字节或注释，IE/Edge/旧 Safari 就立刻退化到怪异模式：width 包含 padding、浮动不触发 BFC、vertical-align 行为混乱。这不是样式问题，是盒模型底层计算逻辑切换了。
- 用 VS Code 打开文件，右下角检查编码是否为 UTF-8（不是 UTF-8 with BOM）
- DevTools Console 搜索
Quirks Mode，有提示就说明已中招 - 把
<!DOCTYPE html>粘贴到文件最顶行，删掉所有前置字符，保存后硬刷新（Ctrl+F5）
未闭合标签在 Blink 和 WebKit 中补全行为不同
Blink（Chrome/Edge）和 WebKit（Safari）对缺失结束标签的容错策略不一致。比如 <p>hello<div>world</div>，Chrome 会自动补 </p> 在 <div> 前；Safari 可能直接截断后续内容，导致 <div> 被吞进上一个段落里——DOM 结构从根上就不同。
- 用
document.body.innerHTML在各浏览器控制台打印实际生成的 DOM，比对结构差异 - 避免依赖浏览器自动补全，显式写出
</p>、</li>等闭合标签 -
<script>标签必须闭合，<script src="a.js"/>在 Safari 中可能不执行
HTML5 语义标签（<header>、<nav> 等）在旧浏览器中根本不存在
IE8–9 不认识这些标签，连 DOM 节点都创建不了；Safari 12 之前把 <main> 当作 inline 元素；Firefox 和 Chrome 虽支持，但默认 margin/padding 值不同。这不是 CSS 能解决的，是解析器压根没把它当“标签”处理。
立即学习“前端免费学习笔记（深入）”；
- 旧项目需引入
document.createElement('header')等脚本，让 IE8–9 创建对应元素 - 现代项目仍建议加一层 CSS 重置：
header, nav, main, section { display: block; } - 别用
<dialog>做弹窗兼容性方案——Safari 15.4 才开始真正渲染为模态层，之前版本只是普通<div>
解析差异藏得深，往往只差一个空格或一行缺失的闭合标签，却让布局在 Safari 上偏移 20px、在 Edge 里内容消失。比起写更多 hack，先确认浏览器到底“看到”了什么 DOM 结构，才是跨浏览器调试的第一步。
