document.compatMode 返回 "BackCompat" 即确认页面处于怪异模式，返回 "CSS1Compat" 才是标准模式；DOCTYPE 必须严格为 <!DOCTYPE html> 且位于文件首字节，不可有 BOM、空格或换行。
document.compatMode 返回 BackCompat 就是确诊了
不用猜、不用看样式是否“居中不对”，直接打开浏览器控制台，执行 document.compatMode。返回 "BackCompat" 就说明页面已掉进怪异模式（Quirks Mode）；返回 "CSS1Compat" 才是标准模式。这个值在 JS 执行前就已锁定，后续任何脚本都无法挽回。
常见误判点：
– 开发者工具里“Document Mode”字段在 Chrome/Firefox 中早已移除，别信它
– document.doctype 返回 null 也意味着 DOCTYPE 没生效，但不如 compatMode 直接可靠
DOCTYPE 必须是文件第一个字节，前面不能有任何字符
哪怕一个空格、换行、<!-- comment -->、<?xml version="1.0"?> 或 UTF-8 BOM（EF BB BF），都会让 IE6–IE9 立即降级为怪异模式，现代浏览器也会受影响（如 iOS Safari 忽略 <meta name="viewport">）。
容易被忽略的源头：
- PHP/JSP 模板里
<?php echo $debug_info; ?>输出了前置空白 - Windows 记事本保存的
.html文件自带 UTF-8 BOM - Webpack/Vite 构建时插件自动注入 license 注释或 runtime 脚本到 HTML 开头
- Vue/React SSR 渲染时模板拼接多了一个换行或空格
验证方法：用 VS Code 开启“显示空白字符”，或运行 hexdump -C index.html | head 查看开头是否有 ef bb bf。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
只用 <!DOCTYPE html>，其他写法全是坑
HTML5 规范唯一认可的标准触发器就是 <!DOCTYPE html>（惯例全大写，但不区分大小写）。所有其他形式都有风险：
-
<!doctype html>：IE8 及更早内核识别失败 → 怪异模式 -
<DOCTYPE html>：漏掉感叹号 → 当作文本内容渲染 -
<!DOCTYPE HTML>：Safari 某些版本降级为 Almost Standards Mode，影响<table>内图片的vertical-align -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">：缺 URI → IE 直接 Quirks
别用 XHTML 声明，也别加 SYSTEM "about:legacy-compat" —— 现代项目完全不需要。
X-UA-Compatible meta 标签和响应头现在基本没用
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 只对 IE8–IE11 生效，且必须放在 <head> 最前面（所有 CSS/JS 之前）。但它会被服务器响应头中的 X-UA-Compatible 覆盖 —— 如果后端设置了 X-UA-Compatible: IE=7，你前端怎么改都没用。
更关键的是：Edge（Chromium 内核）、Chrome、Firefox、Safari 完全忽略这个 meta。现代项目建议直接删掉它，除非你明确要支持 IE11。
真正要盯住的，从来不是补丁式 meta，而是 DOCTYPE 是否干净落位——一个隐藏的 BOM 或构建时注入的注释，就能让整页 CSS 在两个世界之间漂移。
