document.compatmode 是唯一可信的判断依据，返回 "css1compat" 为标准模式、"backcompat" 为怪异模式，因其在页面加载后固化且不受视觉表现干扰。
必须放在文档第一字符位置，前面不能有任何内容，否则浏览器直接降级进怪异模式。
为什么 document.compatMode 是唯一可信的判断依据
页面“看起来正常”完全不可靠——怪异模式下很多布局 bug（比如 width 计算、vertical-align 对齐、getComputedStyle 返回值）只在特定缩放或嵌套结构下才暴露。真正能确认是否生效的，只有运行时检查 document.compatMode：
- 返回
"CSS1Compat"→ 标准模式，生效 - 返回
"BackCompat"→ 怪异模式，声明无效（哪怕只多了一个空格或 BOM） - 该值在页面加载后即固化，刷新才能重试
常见失效场景和修复方式
声明写对了，但依然进怪异模式，大概率是这些地方出了问题：
- 文件开头存在 UTF-8 BOM 字节（某些编辑器保存时自动添加）→ 用十六进制编辑器或 VS Code 的编码切换功能清除
- 模板引擎或 PHP 输出前有空白、换行、注释（如
<!-- IE 兼容提示 -->）→ 把移到绝对首行 - 拼写错误：写成
<doctype html></doctype>（缺!）、（小写开头且缺 <code>!）、（多余参数） - 构建工具注入了前置内容（如 Webpack 的 banner 插件、Vite 的 HTML 插件）→ 检查构建配置中是否向 HTML 文件头部追加了内容
HTML5 DOCTYPE 和旧版声明的实际兼容性差异
虽然 在现代浏览器里也能触发标准模式，但它已失去实际意义：
- 不支持 HTML5 新元素（
<main></main>、<dialog></dialog>等）的语义识别和默认样式 - 部分工具链（如 ESLint 的 HTML 插件、W3C 验证器）会报 warning 或拒绝解析
- 旧声明依赖 DTD，而现代浏览器早已忽略 DTD 下载与校验，纯属冗余
是目前唯一被所有浏览器（包括 IE6+）无条件识别为“强制标准模式”的信号
最容易被忽略的是：怪异模式不是“页面崩了”，而是整套渲染逻辑静默切换——盒模型、继承链、字体度量、甚至 document.body.clientWidth 的计算方式都不同。它不会报错，只会让 CSS 表现变得不可预测，尤其在响应式断点、Flex/Grid 布局、或跨浏览器测试时突然冒出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
