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