一眼确认怪异模式：执行document.compatMode，返回"BackCompat"即确诊；DOCTYPE必须是文件首字节，注释、BOM、空格、小写doctype或缺URI的旧声明均触发怪异模式。
DOCTYPE 不对，布局就不可信——不是“可能出错”，而是盒模型、height 计算、margin 行为全都会退化到 IE5.5 风格。
怎么一眼确认页面进了怪异模式
打开控制台，直接执行 document.compatMode：
- 返回
"CSS1Compat"→ 标准模式，安全 - 返回
"BackCompat"→ 怪异模式，已确诊，立刻排查 DOCTYPE
别信开发者工具里“Document Mode”字段（Chrome/Firefox 已移除），也别靠“居中不对”“高度塌陷”来猜——很多问题（比如 height: 50% 在三层嵌套后失效）根本没法肉眼定位。
哪些 DOCTYPE 写法会触发怪异模式
只要 <!DOCTYPE html> 不是文件第一个字节，浏览器就立即锁定怪异模式。常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
-
<!-- 注释 --><!DOCTYPE html>：注释在前 → 怪异模式 -
\n<!DOCTYPE html>：开头换行或空格 → 怪异模式 - UTF-8 BOM（
EF BB BF）：用记事本保存的 HTML 文件常带此头 → 怪异模式 -
<?php echo $debug; ?><!DOCTYPE html>：PHP 模板里服务端输出前置内容 → 怪异模式 -
<!doctype html>（小写 doctype）：IE8 及更早内核无法识别 → 怪异模式 -
<!DOCTYPE HTML>（大写 HTML）：部分 Safari 版本进近标准模式，影响<table>内图片对齐
旧式声明如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">（缺 URI）也会触发怪异模式，现代项目一律不用。
构建流程中容易被忽略的“隐形前置”
Webpack/Vite 插件、Vue/React SSR 渲染、CMS 模板引擎，都可能在生成 HTML 时自动注入 runtime 脚本、注释或空行——这些内容看不见，但足以让 document.compatMode 返回 "BackCompat"。
验证方法：
- 用编辑器以十六进制查看文件开头，确认首三字节不是
EF BB BF - 在浏览器里右键“查看网页源代码”，肉眼确认
<!DOCTYPE html>是否真在第一行、第一个字符位置 - 执行
document.doctype：返回null就说明没生效
为什么必须用 <!DOCTYPE html>（全小写、无空格、无 URI）
这是唯一被所有现代浏览器一致识别、且 100% 触发标准模式的写法：
- 不依赖 DTD，解析快，无网络请求
- 大小写敏感：
<!DOCTYPE html>✅，<!doctype html>❌（IE8-） - 不能加空格：
<! DOCTYPE html>或<!DOCTYPE html >都会失败 - URI 和 SYSTEM 声明（如 XHTML 的 DTD 地址）不仅没必要，还可能意外触发近标准模式
真正要盯住的，从来不是“怎么调 margin 居中”，而是这一行是否干净落位——一个隐藏的 BOM 或构建时注入的换行，就能让整页 CSS 在两个世界之间漂移。
