必须写<!DOCTYPE html>且位于文件首字符，否则浏览器进入怪异模式（document.compatMode === "BackCompat"）；快速确认方式是执行document.compatMode，返回"BackCompat"即确诊怪异模式，返回"CSS1Compat"才为标准模式。
必须写 <!DOCTYPE html>，且必须放在第一行最开头，否则浏览器大概率进怪异模式（document.compatMode === "BackCompat"）——这不是兼容性问题，是渲染逻辑彻底跑偏。
怎么快速确认当前页面是否进了怪异模式
打开开发者工具控制台，直接执行：document.compatMode。如果返回 "BackCompat"，就坐实了怪异模式；返回 "CSS1Compat" 才算安全。
常见误判点：
- 以为加了
<meta name="viewport">就万事大吉——它在怪异模式下可能被忽略或计算错误 - 看到页面“看起来还行”就放松警惕——
box-sizing、line-height、vertical-align等行为已悄悄退化成 IE5.5 风格 - 用 Lighthouse 检查通过了，但没手动验证
document.compatMode——Lighthouse 不会报BackCompat的错，只检查声明是否存在
<!DOCTYPE html> 前面不能有任何字符
哪怕一个 UTF-8 BOM、一个空格、一个换行、甚至一个 HTML 注释 <!-- -->，都会让浏览器放弃标准模式。
实操建议：
- 用 VS Code 或 Sublime Text 打开文件，启用「显示不可见字符」，确认
<!DOCTYPE html>确实从第 1 行第 1 列开始 - 服务端生成的 HTML（如 PHP/Node.js 模板）容易在
<?php或res.send()前意外输出空白，要检查输出缓冲和模板拼接逻辑 - 避免用
echo <?='<!DOCTYPE html>'?>这类写法——PHP 的短标签开启状态不一，易引入隐式换行
大小写、标点、拼写错误都算无效声明
浏览器对 <!DOCTYPE html> 的识别非常严格：叹号不能少、尖括号不能反、DOCTYPE 必须全大写（尽管规范说不区分大小写，但 Safari 某些版本对 <!doctype html> 会降级为“几乎标准模式”，影响表格图片对齐）。
这些写法全部无效：
-
<DOCTYPE html>（漏叹号） -
<!doctype html>（小写开头） -
<!DOCTYPE HTML>（大写 HTML，部分 Safari 版本触发 Almost Standards Mode） -
<!DOCTYPE html SYSTEM "about:legacy-compat">（合法但无必要，现代浏览器不依赖 system identifier）
服务器响应头里的 X-UA-Compatible 会覆盖 HTML 中的声明
如果你改了 HTML 却没生效，先看 Network 面板里 Response Headers 是否含 X-UA-Compatible: IE=5 或 IE=7 ——这类头会强制降级，连 <!DOCTYPE html> 都救不回来。
处理原则：
- 现代项目（Chrome/Firefox/Safari/Edge Chromium）完全不需要
X-UA-Compatible，应从 Nginx/Apache/Express 配置中移除 - 删掉 HTML 中所有
<meta http-equiv="X-UA-Compatible" content="IE=edge">，除非你明确支持 IE11 且无法控制服务器头 - 若必须保留该 meta，它必须位于
<head>最顶部，且前面不能有任何 JS/CSS 标签——否则 IE 可能来不及读取
最容易被忽略的是：怪异模式下 document.documentElement.clientWidth 和视口相关 API 的返回值会失真，导致移动端 viewport 缩放异常、rem 计算偏移、甚至 getBoundingClientRect() 返回错误坐标。这不是样式 bug，是底层解析器切换了整套计算逻辑——修 DOCTYPE，比调 CSS 快得多。
