IE6/7完全不支持box-sizing，任何写法均无效；Firefox 4–15需-moz-box-sizing前缀；Chrome 9–22/Safari 5.1–6.0需-webkit-box-sizing；IE8需-ms-box-sizing，IE9+支持无前缀。
IE6/7 完全不支持 box-sizing，任何写法都无效
这不是兼容性问题，是根本不可用。IE6 和 IE7 解析 CSS 时直接忽略 box-sizing 声明，包括所有带前缀的变体（-ms-box-sizing、-moz-box-sizing 等）。它们只按 content-box 渲染，且无法覆盖。
常见错误现象：在 IE7 下调试时发现 * { box-sizing: border-box; } 没生效，以为是写法错——其实它压根没被解析。此时若依赖 padding 不撑宽的布局，元素会意外溢出容器。
- 不能靠条件注释或 polyfill 补救，只能放弃精确尺寸控制，或改用 table 布局等老方案
- 如果项目必须支持 IE7，建议避开依赖固定 width + padding 的响应式组件
- 现代项目基本可忽略此情况，但遗留系统维护时需确认 UA 判断逻辑是否真绕过了 IE7
Firefox 4–15 需要 -moz-box-sizing 前缀
Firefox 在 16 版本才开始支持无前缀的 box-sizing，此前版本（4–15）只认 -moz-box-sizing。直接写 box-sizing: border-box 会被静默忽略。
使用场景：老项目仍需兼容 Firefox 15（如政务内网环境），或 Autoprefixer 配置未开启 firefox >= 15 时容易漏掉该前缀。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写出
-moz-box-sizing: border-box，仅靠 Autoprefixer 默认配置可能不够 - Firefox 16+ 支持无前缀写法，但为保险起见，建议保留三套：
-webkit-box-sizing、-moz-box-sizing、box-sizing -
padding-box值虽在 Firefox 中存在，但实际渲染不可靠，不要在生产环境使用
Chrome 9–22 和 Safari 5.1–6.0 需要 -webkit-box-sizing
这些早期 WebKit 内核版本不识别无前缀 box-sizing，写了也等于没写。典型表现是开发时 Chrome 最新版看着正常，但测试机上 Chrome 18 却出现宽度撑开。
关键点：-webkit- 前缀不是“可选优化”，而是生效前提。尤其注意 Safari 6.0（OS X 10.8）及更早版本仍属此范围。
- 必须包含
-webkit-box-sizing: border-box，顺序建议放在最前（避免被后续声明覆盖） - 移动端 iOS Safari 5.1–6.1 同样适用该规则，老版 iPad 设备仍可能遇到
- Chrome 23+、Safari 6.1+ 已原生支持无前缀版本，但保留前缀成本极低，建议始终带上
IE8–11 对 -ms-box-sizing 的处理差异
IE8 开始支持 box-sizing，但仅限 border-box 和 content-box；IE8 需要 -ms-box-sizing 才生效，IE9+ 才支持无前缀写法。而 IE10–11 存在 flex 布局下的特殊 bug：inline 元素作为 flex item 时，box-sizing 可能被忽略。
常见错误现象：在 IE11 中，<span>文字</span> 放进 display: flex 容器后，即使设了 box-sizing: border-box，padding 仍会撑宽——因为 IE11 未将其视为真正的 flex item。
- IE8 必须写
-ms-box-sizing: border-box，且不能依赖inherit（IE8 不支持该值） - IE9+ 可用无前缀写法，但混用旧版 Bootstrap 等库时，仍建议补全
-ms-避免被覆盖 - Flex 场景下，对子元素显式声明
display: block或display: flex可规避 IE11 的 inline 元素 bug
全局重置时最容易被忽略的其实是伪元素和表单控件——<em>::before, </em>::after 不加进选择器会导致装饰性三角、边框等错位；<input> 等控件若一并套用 border-box，在 Safari 旧版里可能出现文字截断。这些细节不报错，但会让布局在边缘场景突然失准。
