IE8必须用-ms-box-sizing且置于box-sizing之前，Safari无需-webkit-box-sizing前缀，全局重置需覆盖*、::before、::after及表单控件并置顶。
IE8 必须用 -ms-box-sizing，且顺序不能错
IE8 支持 box-sizing，但只认 -ms-box-sizing，写成 box-sizing: border-box 完全无效。即使加了 进入标准模式，也必须显式带上前缀。常见错误是把前缀放后面：<code>box-sizing: border-box; -ms-box-sizing: border-box;——IE8 会忽略后半句，因为解析到第一个合法声明就停了。正确写法只能是：-ms-box-sizing: border-box; box-sizing: border-box;。
Safari 6.0 及更早版本要加 -webkit-box-sizing
这个前缀常被误认为“可选”，但它在 Safari 6.0（OS X 10.8）、iOS Safari 5.1–6.1 中是生效前提。不加就回退到 content-box。注意：-webkit-box-sizing 在 Safari 6.1+ 已废弃，现代版本（Safari 14+）完全不需要；但若项目仍需兼容老 iPad 或企业内网旧 Mac，就得保留。建议顺序统一放在最前：-webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;，避免被后续声明覆盖。
-webkit-box-sizing 在 Safari 中其实从未被实现
这是个长期被混淆的事实：MDN 和 Can I Use 明确标注，box-sizing 自 Safari 5.1 起就是无前缀标准属性，-webkit-box-sizing 从未被任何 Safari 版本识别或解析。如果你在 Safari 下发现 box-sizing 异常，大概率不是前缀问题，而是 filter、transform 或 overflow 触发的图层合成截断。强行加上 -webkit-box-sizing 不仅无效，还会让 CSS 解析器多做一次丢弃操作，属于冗余噪音。
全局重置必须覆盖伪元素和表单控件
只写 * { box-sizing: border-box; } 是不够的：::before 和 ::after 不继承该值，老旧后台模板又大量依赖伪元素做图标或分割线；<input>、<button></button> 在 IE8–10 中对 border-box 支持极不稳定。必须显式写：
*,
*::before,
*::after { box-sizing: border-box; }，且这条规则要放在所有 CSS 的最顶部。对表单控件可加固：input, textarea, select, button { box-sizing: border-box !important; }——这里的 !important 不是妥协，是必要兜底。
真正起效的从来不是“写了多少前缀”，而是从 HTML 第一个字节开始，就确保每个新插入节点（包括动态生成的、第三方组件里的、SVG 内嵌的）都被同一套盒模型逻辑覆盖。漏掉 、伪元素遗漏、或表单控件未加固，等于没做。
立即学习“前端免费学习笔记（深入）”；
