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