document.compatmode 返回 "backcompat" 即为怪异模式，此时渲染退化至 ie5.5 级别；返回 "css1compat" 为标准模式；该值由 doctype 是否严格顶格、无 bom、无空格决定，是唯一跨浏览器可靠判断依据。
不写 ，或者写错，<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://m.php.cn/zt/16180.html" target="_blank">浏览器</a>大概率就进怪异模式了——这不是兼容性问题，是渲染逻辑直接退化到 IE5.5 级别，<code>width、vertical-align、getBoundingClientRect() 全都不按你写的来算。
怎么一眼确认当前页面是不是怪异模式
打开开发者工具控制台，直接执行：document.compatMode。返回 "BackCompat" 就是确诊怪异模式；"CSS1Compat" 才是标准模式。这个值在页面加载早期就已确定，刷新后不变，也不受后续 JS 影响。
-
document.compatMode是唯一可靠、跨浏览器的判断依据，比看源码是否写了更直接 - IE 还支持
document.documentMode（仅 IE），但现代项目基本不用管它 - 如果返回
"BackCompat"，别急着改 CSS，先查 DOCTYPE —— 90% 的“布局突然错位”“移动端视口失效”都卡在这一步
必须怎么写才有效
它不是标签，不闭合，不区分大小写，但必须严格满足三个物理条件：顶格、无前置字符、内容精确。
- ✅ 正确写法只有这一种：
（惯例全大写，但 <code> 在多数现代浏览器也认） - ❌ 常见无效写法：
<doctype html></doctype>（漏叹号）、（叹号后有空格）、 - ⚠️ 即使只多一个 UTF-8 BOM 字节（如编辑器自动加的），IE 和某些旧内核会直接判定为怪异模式
- 过时写法如
会被识别，但可能触发“几乎标准模式”，影响表格内图片对齐等细节
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 还有必要吗
对 Chrome/Firefox/Safari 完全无效；对 Edge（Chromium 内核后）也无效；只对 IE8–IE11 生效，且生效条件极苛刻。
- 必须放在
的第一个子节点位置，前面不能有任何注释、空格或<script></script> - 如果服务器响应头里含
X-UA-Compatible: IE=7，它会直接覆盖页面里的<meta>，改 HTML 没用 - 现代项目建议直接删掉这行 —— 除非你明确要支持 IE11 且无法控制服务器响应头
- 加了它却没效果？先去 Network 面板看响应头，再检查它在
里的位置
移动端视口异常可能和 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。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
