缺失会导致box-sizing失效，因为ie6–8会进入怪异模式，此时width默认按“内容+padding+border”计算且完全忽略box-sizing属性；即使声明box-sizing: border-box或-ms-box-sizing: border-box，该属性在怪异模式下也不被解析，开发者工具中显示为灰色或带删除线。
直接加 就能强制标准模式，<code>box-sizing 才可能生效；不加这个声明，IE8 及以下会退化到怪异模式，box-sizing: border-box 彻底被忽略。
为什么 DOCTYPE 缺失会导致 box-sizing 失效
IE6–8 在无 时自动进入怪异模式（Quirks Mode），此时所有 CSS 解析逻辑回退到旧规则：<code>width 默认就按「内容 + padding + border」计算——这看起来像 border-box，但它是硬编码行为，不响应 box-sizing 属性。你写了 box-sizing: border-box，浏览器根本不去解析它。
- 开发者工具里检查元素，
box-sizing属性显示为灰色或带删除线，基本就是怪异模式在作祟 - 即使加了
-ms-box-sizing: border-box，在怪异模式下也无效 必须是 HTML 文件第一行，前面不能有任何空格、注释或 XML 声明
IE8 需要 -ms-box-sizing 前缀，且顺序不能错
IE8 支持 box-sizing，但只认 -ms-box-sizing；现代构建工具（如 PostCSS autoprefixer）默认不处理 IE8，必须显式配置 browsers: ["IE >= 8"] 才能补全前缀。
- 写法必须是
-ms-box-sizing: border-box; box-sizing: border-box;，前缀在前，否则 IE8 忽略后半句 - 仅靠
box-sizing: border-box无法让 IE8 生效，哪怕有 - IE9+ 可以只写标准属性，无需前缀
全局重置必须覆盖 *::before 和 *::after
伪元素不继承父级的 box-sizing，如果只写 * { box-sizing: border-box; }，::before 或 ::after 仍走默认 content-box，容易导致装饰块意外撑宽容器。
- 正确写法是：
*, *::before, *::after { box-sizing: border-box; } - 这条规则必须放在所有 CSS 的最顶部，否则会被 Normalize.css、Bootstrap 等重置样式覆盖
- 检查方式：在 DevTools 中选中一个伪元素，看
box-sizing是否显示为border-box且未被划掉
真正起效的不是“写了 box-sizing”，而是它从 HTML 第一个字节开始就控制了每个新插入节点的尺寸逻辑——动态生成的元素、第三方组件、甚至 SVG 内嵌的 <foreignobject></foreignobject>，都得被这套规则兜住。漏掉 或伪元素覆盖，就等于没做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
