document.compatmode返回"css1compat"即为标准模式，否则为怪异模式；该值是唯一可靠依据，必须在文件首字节严格书写，前置任何字符（注释、bom、空格）均触发怪异模式。
document.compatMode 返回 "CSS1Compat" 才算真正进入标准模式；只要不是这个值，整页 CSS 和 JS 行为都可能漂移——这不是“样式没写对”，是浏览器底层渲染逻辑切换了。
怎么一眼确认页面是否在标准模式
打开控制台，直接执行：document.compatMode。只看返回值："CSS1Compat" 是标准模式，"BackCompat" 就是怪异模式。别信开发者工具里任何“Document Mode”字段——Chrome 和 Firefox 已彻底移除该显示；也别靠“看起来居中了”来判断，很多问题（比如 height: 50% 在三层嵌套后失效、margin: 0 auto 突然不居中）根本没法肉眼识别。
必须是文件第一个字节
浏览器解析 HTML 是流式的，一旦开头遇到任何非空白字符（注释、BOM、空格、换行），立刻锁定怪异模式。document.compatMode 在 JS 执行前就已确定，后续 JS 无法挽回。
- 错误写法：
<!-- 注释 -->、<code>\n、带 UTF-8 BOM 的文件（<code>EF BB BF） - 正确写法：
必须是整个文件的第一个字节，前后不能有任何字符 - 构建时容易被忽略：某些 CMS、模板引擎、Webpack 插件会自动注入头部内容，这种“看不见的前置”比手误更难排查
为什么删掉 DOCTYPE 页面还能显示
浏览器会降级兜底，启用怪异模式模拟 IE5 行为——盒模型变成 border-box、getComputedStyle 返回值异常、document.body.clientWidth 计算逻辑不同。这些差异不会报错，但会让布局在不同浏览器间表现不一致。
-
width: 200px元素加了padding: 10px和border: 2px，怪异模式下实际占宽仍是 200px；标准模式下是 224px - 子元素设
height: 50%，父元素没设高度 → 怪异模式下直接当 0 处理；标准模式下 fallback 到auto -
document.scrollingElement在怪异模式下指向body，而非html，影响滚动监听和 rem 基准
真正复杂的是：这些问题往往只在特定缩放比例、特定设备或嵌套较深时才浮现，调试成本远高于一开始就确保 干净落位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
