quirks模式下盒模型宽度=content+padding+border；standards模式下width仅指content宽度，padding和border额外计算。主要触发条件包括省略doctype、旧dtd、doctype前有注释/空格或拼写错误，而是最可靠启用standards模式的方式。
不加 ，浏览器大概率进 Quirks 模式；加了，基本就进 Standards 模式——这是最直接、最可靠的行为控制方式。
Quirks 模式下盒模型怎么算宽度？
这是最常踩坑的地方。比如写 .box { width: 200px; padding: 10px; border: 2px solid #000; }：
- 在 Quirks 模式中，
width: 200px指的是「内容 + padding + border」总宽，实际内容区只剩200 - 20 - 4 = 176px - 在 Standards 模式中，
width: 200px仅代表内容区宽度，整个元素占位是200 + 20 + 4 = 224px - 这个差异会直接导致布局错位，尤其在老项目迁移或复用第三方 CSS 时容易漏查
哪些 DOCTYPE 会触发 Quirks 模式？
触发条件非常具体，不是“不标准”就怪异，而是浏览器有明确的黑名单逻辑：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 完全省略
声明（即文档开头直接是 <code>） - 使用 HTML 3.2 或更早的 DTD，例如
- DOCTYPE 写在
<?xml>声明之后（IE6/7 中常见） - DOCTYPE 前有 HTML 注释或空格（如
<!-- comment -->），部分旧版 IE 会降级 空声明或拼写错误（如 <code>）也归入 Quirks
Standards 模式是不是只有 这一种写法？
不是。只要符合 W3C 规范的 DOCTYPE 都能触发，但兼容性和语义清晰度差别很大：
：HTML5 推荐写法，现代浏览器 100% 识别为 Standards 模式，无歧义：HTML4 严格模式，也进 Standards，但已过时：触发 Almost Standards 模式（IE 和 WebKit 行为略有不同），图片垂直对齐等仍按 Quirks 处理- XML 声明
<?xml version="1.0"?>单独存在，不带 DOCTYPE，也会让 IE 进 Quirks
为什么检查 Quirks 模式不能只看有没有 DOCTYPE？
因为某些 meta 标签或 HTTP 头可能覆盖它，尤其是 IE 系列：
-
<meta http-equiv="X-UA-Compatible" content="IE=5">会强制进入 Quirks，哪怕有 -
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">会根据 DOCTYPE 动态切换：有 DOCTYPE → Standards；没 DOCTYPE → Quirks - 服务器返回的
X-UA-CompatibleHTTP header 优先级高于页面内 meta，调试时容易忽略 - Chrome / Firefox 不支持 X-UA-Compatible，但 Safari 在某些历史版本中对 DOCTYPE 解析也有细微偏差
真正要稳住渲染模式，得同时确认三件事：文档开头第一行是干净的 、没有干扰性 XML 声明或注释、页面中没有 <code>X-UA-Compatible meta（或确保它设为 IE=edge）——少一个环节，都可能在某个浏览器里悄悄切回 Quirks。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
