一眼确认怪异模式：执行document.compatmode，返回"backcompat"即确诊；doctype必须是文件首字节，注释、bom、空格或错误声明均触发怪异模式，导致盒模型、height、margin等退化为ie5.5行为。
DOCTYPE 不是装饰，它直接决定整页 CSS 的计算逻辑是否可信。漏写、错放、被构建工具悄悄污染，都会让页面掉进怪异模式——此时你写的 width、height、margin: 0 auto 全部按 IE5 规则重算，而你根本不会立刻察觉。
怎么一眼确认当前是标准模式还是怪异模式
打开控制台，直接执行：document.compatMode。返回 "CSS1Compat" 就是标准模式；返回 "BackCompat" 就是怪异模式。这是唯一可靠依据。
别信开发者工具里“Document Mode”字段——Chrome 和 Firefox 已彻底移除该显示；也别靠“看起来居中不对”来猜，很多差异（比如 height: 50% 在三层嵌套后才失效）根本没法肉眼定位。
- 前置注释、空格、BOM（
EF BB BF）都会让document.compatMode返回"BackCompat" - 某些 CMS 或 Webpack 插件会在 HTML 头部自动注入 meta 或 script，这种“看不见的前置”比手误更难排查
- 哪怕只多一个换行符在
前面，也触发怪异模式
怪异模式下最常踩的 CSS 坑有哪些
不是样式“没生效”，而是尺寸、继承、对齐逻辑全变了。核心问题在于盒模型和继承规则回退到 IE5 行为。
-
width: 200px元素加了padding: 10px和border: 2px，实际占宽仍是200px（IE 盒模型）；标准模式下是224px -
margin: 0 auto水平居中失效，得靠父级text-align: center - 子元素设
height: 50%，父元素没设高度 → 怪异模式下直接当0处理；标准模式下 fallback 到auto - 行内元素（如
span）设width/height在怪异模式下居然生效，标准模式下完全忽略 - 表格中字体属性不继承父级设置，空单元格默认显示边框
为什么 必须是文件第一个字符
浏览器解析 HTML 是流式进行的。只要开头遇到任何非空白字符（注释、BOM、空格、换行），就立即锁定怪异模式。document.compatMode 在 JS 执行前已确定，后续 JS 无法挽回。
- 错误写法：
<!-- 注释 -->、<code>\n、带 UTF-8 BOM 的文件 - 正确写法：
必须是整个文件的第一个字节 - 构建时容易被忽略：某些模板引擎或 CMS 会自动注入头部内容，这种“看不见的前置”比手误更难排查
真正要盯住的，从来不是“怎么修某个居中失效”，而是 是否干净落位——它不参与渲染，却决定了所有渲染结果是否可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
