不加浏览器基本进quirks模式，加了几乎肯定进standards模式；触发quirks模式的情形包括：doctype缺失、旧dtd（如无uri的html 4.01 transitional）、doctype前有空格/注释/bom/xml声明等。
不加 ，浏览器基本就进 Quirks 模式；加了，几乎肯定进 Standards 模式——这是最可控、最省事的开关，别绕弯。
哪些 DOCTYPE 会意外触发 Quirks 模式
不是“写得不标准”才进怪异模式，而是浏览器有明确的黑名单逻辑。以下几种情况都会直接触发 Quirks 模式：
完全缺失（哪怕只少一个字符）这类旧版 DTD（尤其没带 URI 的）前面有任意字符：空格、换行、<code><!-- 注释 -->、BOM 字节-
<?xml version="1.0" encoding="UTF-8"?>出现在之前（IE 系列尤其敏感）
注意： 能进 Standards 模式，但已过时；<code> 是唯一推荐且无歧义的写法。
盒模型差异导致布局错位的典型场景
这是 Quirks 模式下最常踩坑的地方，尤其在复用老 CSS 或跨项目迁移时容易漏查：
- 写
.box { width: 200px; padding: 10px; border: 2px solid #000; }：
Quirks 模式中，整个元素占位就是 200px（内容区只剩 176px）；Standards 模式中，占位是 224px，内容区才是 200px - 给
<span></span>设width或height：Quirks 模式下会生效，Standards 模式下完全无效 - 设
height: 100%：Quirks 模式可能“自动撑开”，Standards 模式要求父元素必须有明确高度（比如height: 500px或height: 100vh），否则不生效
如何快速确认当前页面所处模式
打开开发者工具控制台，执行以下任一命令即可：
document.compatMode
返回 "CSS1Compat" 表示 Standards 模式，返回 "BackCompat" 就是 Quirks 模式。
也可以检查 document.doctype：
- 为
null→ Quirks 模式（大概率没写 DOCTYPE 或位置不对） - 存在且
name === "html"→ 大概率是 Standards 模式（但仍需结合compatMode确认）
别只看 HTML 源码里有没有 ，要验证它是否真的被浏览器识别——比如服务器模板渲染时插了空格，或构建工具自动注入了注释，都可能导致失效。
最容易被忽略的是：Quirks 模式下某些 CSS 行为（如 margin: auto 水平居中块级元素）可能“看起来正常”，但一旦切到 Standards 模式就失效，而这种问题在线上环境才暴露，本地开发却测不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
