最可靠方式是执行document.compatMode：返回"CSS1Compat"为标准模式，返回"BackCompat"为怪异模式；DOCTYPE必须为且独占首行首字符，前置空格、注释或BOM均触发怪异模式。
页面没加 ，或者 DOCTYPE 写错、大小写混用、带多余空格，浏览器大概率就进怪异模式了——这不是警告，是事实。
怎么快速确认当前是标准模式还是怪异模式
最可靠的方式是查 document.compatMode：
- 返回
"CSS1Compat"→ 标准模式 - 返回
"BackCompat"→ 怪异模式
别依赖开发者工具里“Document Mode”这类 IE 专属字段（现代 Chrome/Firefox 已不显示），也别靠肉眼观察布局是否“奇怪”来判断——有些差异（比如百分比高度失效）要嵌套三层才暴露，等你看到时已经难定位了。
怪异模式下最常踩的 CSS 坑
核心问题不是“样式没生效”，而是“生效了但算错了尺寸”。典型表现包括：
立即学习“前端免费学习笔记（深入）”；
-
width: 200px的<div> 加了 <code>padding: 10px和border: 2px，实际占宽仍是 200px（IE 盒模型）；标准模式下是 224px -
<span></span>设width/height居然起作用（标准模式下完全忽略） -
margin: 0 auto水平居中失效，得靠父级text-align: center - 子元素设
height: 50%，父元素没设高度 → 怪异模式下直接当 0 处理，标准模式下按规范会 fallback 到auto - 错误写法：
\n<!-- 注释 -->\n - 正确写法：
必须是文件第一个字符 - UTF-8 BOM（
EF BB BF）也会触发怪异模式，生成 HTML 时注意编码选项
这些不是 bug，是历史行为固化。一旦漏掉 DOCTYPE，整页 CSS 就在两个世界之间漂移。
为什么 必须放在第一行且不能有前置内容
浏览器解析 HTML 是流式进行的。只要开头遇到任何非空白字符（比如注释 <!-- comment -->、BOM 字符、空格、换行），就会立即触发怪异模式——document.compatMode 在 JS 执行前就已锁定。
很多构建工具（如某些模板引擎或 CMS）会在文件头自动注入内容，这种“看不见的前置”比手误更难排查。
怪异模式不是浏览器的缺陷，是向后兼容的代价。但代价由你承担：它让同一份 CSS 在不同环境产生不可预测的盒尺寸、对齐和继承行为。真正要盯住的，从来不是“怎么修某个居中失效”，而是“DOCTYPE 是否干净落位”。
