document.compatMode 返回 "BackCompat" 即确诊浏览器已进入怪异模式（Quirks Mode），此时盒模型、width 解析、vertical-align 等均退化为 IE5.5 行为；根本原因是 DOCTYPE 前存在 BOM、空格、换行或错误写法，必须严格使用 <!DOCTYPE html> 且紧贴文件开头。
document.compatMode 返回 "BackCompat" 就说明出问题了
这不是警告，是确诊。只要在控制台执行 document.compatMode 得到 "BackCompat"，浏览器就已进入怪异模式（Quirks Mode）。此时盒模型计算、width 解析、vertical-align 对齐、甚至 getBoundingClientRect() 的返回值都退化为 IE5.5 行为——不是“可能错”，是“必然错”。
常见诱因包括：
-
<!DOCTYPE html>前有 UTF-8 BOM、空格、换行或 HTML 注释 - 写成
<!doctype html>（小写）或<DOCTYPE html>（漏叹号） - 用了过时声明，比如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">但没带 URI - 服务器响应头里含
X-UA-Compatible: IE=5或IE=7，它会覆盖页面中任何<meta>
为什么必须是 <!DOCTYPE html> 而不是别的写法
HTML5 规范只认 <!DOCTYPE html> 这一种形式作为标准模式触发器。它不区分大小写，但惯例全大写；它不是标签，不闭合；它必须紧贴文件开头，前面不能有任何字符（含 BOM）。
其他写法的实际后果：
立即学习“前端免费学习笔记（深入）”；
-
<!doctype html>：部分旧内核（如 IE8）识别失败，直接进怪异模式 -
<!DOCTYPE HTML>：Chrome/Firefox 可接受，但 Safari 某些版本降级为“几乎标准模式”（Almost Standards Mode），影响表格单元格内图片垂直对齐 -
<!DOCTYPE html SYSTEM "about:legacy-compat">：虽合法但无必要，现代浏览器不依赖 system identifier
<meta http-equiv="X-UA-Compatible"> 在现代项目里基本没用
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 只对 IE8–IE11 生效，且必须放在 <head> 最前面（所有 CSS/JS 之前）。Edge（Chromium 内核后）、Chrome、Firefox、Safari 完全忽略它。
更麻烦的是：如果服务器响应头里带了 X-UA-Compatible，它会覆盖页面中的 <meta>——你改了 HTML 却毫无作用。
排查建议：
- 用开发者工具的 Network 面板看响应头，确认没有
X-UA-Compatible - 删掉页面中所有
<meta http-equiv="X-UA-Compatible">，除非你明确要支持 IE11
移动端渲染异常可能是 DOCTYPE 导致的间接问题
看似是 <meta name="viewport"> 没生效，实则因怪异模式下 document.documentElement.clientWidth 计算错乱，进而导致响应式布局断点失效、rem 基准错误、flex 布局塌陷等连锁反应。
尤其要注意：
- 服务端模板（如 PHP、JSP、Thymeleaf）可能在生成 HTML 时悄悄注入 BOM 或空行
- Git 仓库配置不当（如
core.autocrlf）可能导致换行符污染 DOCTYPE 前置位置 - 构建工具（如 Webpack/Vite 插件）若拼接 HTML 片段，未做 trim 处理，也可能引入不可见字符
