document.compatMode 返回 "BackCompat" 即为怪异模式，此时渲染退化至 IE5.5 级别；返回 "CSS1Compat" 为标准模式；该值由 DOCTYPE 是否严格顶格、无 BOM、无空格决定，是唯一跨浏览器可靠判断依据。
不写 <!DOCTYPE html>，或者写错，浏览器大概率就进怪异模式了——这不是兼容性问题，是渲染逻辑直接退化到 IE5.5 级别，width、vertical-align、getBoundingClientRect() 全都不按你写的来算。
怎么一眼确认当前页面是不是怪异模式
打开开发者工具控制台，直接执行：document.compatMode。返回 "BackCompat" 就是确诊怪异模式；"CSS1Compat" 才是标准模式。这个值在页面加载早期就已确定，刷新后不变，也不受后续 JS 影响。
-
document.compatMode是唯一可靠、跨浏览器的判断依据，比看源码是否写了<!DOCTYPE html>更直接 - IE 还支持
document.documentMode（仅 IE），但现代项目基本不用管它 - 如果返回
"BackCompat"，别急着改 CSS，先查 DOCTYPE —— 90% 的“布局突然错位”“移动端视口失效”都卡在这一步
<!DOCTYPE html> 必须怎么写才有效
它不是标签，不闭合，不区分大小写，但必须严格满足三个物理条件：顶格、无前置字符、内容精确。
- ✅ 正确写法只有这一种：
<!DOCTYPE html>（惯例全大写，但<!doctype html>在多数现代浏览器也认） - ❌ 常见无效写法：
<DOCTYPE html>（漏叹号）、<! DOCTYPE html>（叹号后有空格）、<!DOCTYPE html>（行尾有空格）、开头有 BOM 或换行符 - ⚠️ 即使只多一个 UTF-8 BOM 字节（如编辑器自动加的），IE 和某些旧内核会直接判定为怪异模式
- 过时写法如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">会被识别，但可能触发“几乎标准模式”，影响表格内图片对齐等细节
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 还有必要吗
对 Chrome/Firefox/Safari 完全无效；对 Edge（Chromium 内核后）也无效；只对 IE8–IE11 生效，且生效条件极苛刻。
立即学习“前端免费学习笔记（深入）”；
- 必须放在
<head>的第一个子节点位置，前面不能有任何注释、空格或<script> - 如果服务器响应头里含
X-UA-Compatible: IE=7，它会直接覆盖页面里的<meta>，改 HTML 没用 - 现代项目建议直接删掉这行 —— 除非你明确要支持 IE11 且无法控制服务器响应头
- 加了它却没效果？先去 Network 面板看响应头，再检查它在
<head>里的位置
移动端视口异常可能和 DOCTYPE 有关
看起来是 <meta name="viewport"> 没起作用，但根本原因可能是 DOCTYPE 错误导致怪异模式下视口计算逻辑紊乱。
- 怪异模式下，
document.documentElement.clientWidth返回值不可靠，iOS Safari 某些版本甚至会忽略viewportmeta - 加了
viewport仍缩放异常？先验证document.compatMode，再查 DOCTYPE 是否被 BOM 或空格污染 - 服务端返回的
Content-Type缺少charset=utf-8，也可能导致 HTML 解析中断，间接让 DOCTYPE 失效
真正容易被忽略的不是“要不要写 DOCTYPE”，而是它前面有没有看不见的字符——BOM、UTF-8 签名、编辑器自动插入的注释、甚至 Git 某些换行处理引入的空白，都会让它失效。验证方式永远只有一个：document.compatMode。
