只要页面有正确的<!DOCTYPE html>，IE8+默认使用标准盒模型；IE6/7因怪异模式将width解释为内容宽+内边距+边框，而标准模式仅指内容宽，且DOCTYPE必须位于文件最开头、无任何前置字符，document.compatMode返回"CSS1Compat"才表示标准模式。
现代开发中，IE 兼容性问题在盒模型上已无需主动“避开”——只要页面有正确的 <!DOCTYPE html>，所有主流浏览器（包括 IE8+）都默认使用标准盒模型（box-sizing: content-box），IE6/7 则根本不该出现在新项目里。
为什么加了 DOCTYPE 就能解决盒模型混乱？
IE6/7 在怪异模式（quirks mode）下把 width 解释为“内容宽 + 内边距 + 边框”，而标准模式下只指内容宽。没有 <!DOCTYPE html> 或写错（比如漏空格、大小写混用、前面有注释），IE 会退化到怪异模式。
- 必须放在 HTML 文件最开头，前面不能有任何字符（包括空格、
<!--注释） - 仅支持
<!DOCTYPE html>（HTML5 声明），不推荐Transitional或StrictDTD - 验证方式：打开 DevTools → 查看
document.compatMode，返回"CSS1Compat"才是标准模式
box-sizing 是现代项目的真正控制点
标准盒模型本身没问题，但开发者常需要“宽度包含 padding 和 border”，这时靠 box-sizing: border-box 更可控，且它在 IE8+ 完全可用。
- IE8 支持
box-sizing，但需带-ms-前缀：-ms-box-sizing: border-box - 全局重置推荐写法：
* { box-sizing: border-box; -ms-box-sizing: border-box; } - 注意：伪元素（
::before/::after）也受该规则影响，某些布局中需单独重置
哪些场景还会意外触发怪异模式？
即使写了 DOCTYPE，以下情况仍会让 IE（尤其 IE9 及更早）降级：
立即学习“前端免费学习笔记（深入）”；
- 通过
iframe加载无DOCTYPE的页面，父页面的模式会被子页面污染（IE 特有） - 本地双击打开 HTML 文件（
file://协议），部分旧版 IE 会忽略DOCTYPE - 服务器返回了错误的
Content-Type（如text/plain），导致 IE 拒绝解析DOCTYPE
真实项目里，IE6/7 已无维护价值；IE8–11 的盒模型行为在标准模式下完全一致。真正要盯紧的，是那个藏在文件最顶上、看似不起眼的 <!DOCTYPE html> —— 它不是装饰，是开关。
