{ box-sizing: border-box } 会出问题，因其在 Safari input[type="search"] 中导致清除按钮错位、svg text 的 dominant-baseline 失准，且旧版 Safari ≤12.1 中 ::before/::after 不继承该值仍为 content-box，还会覆盖 Ant Design 等组件库中依赖 content-box 的显式声明；安全写法是 html { box-sizing: border-box; } 和 , ::before, ::after { box-sizing: inherit; } 两行置顶，兼顾统一与可覆盖。
为什么* { box-sizing: border-box }会出问题
它看似简单，但实际在 Safari 的 input[type="search"] 里会让清除按钮（×）错位；svg text 的 dominant-baseline 计算失准；伪元素如 ::before 和 ::after 在旧版 Safari ≤12.1 中根本不继承，仍按 content-box 渲染，导致用伪元素画的三角或边框尺寸崩掉。更隐蔽的是，它会无声覆盖组件库中显式写的 box-sizing: content-box，比如 Ant Design 的输入框内部逻辑就依赖这个值。
真正安全的写法只有两行，且顺序不能错
必须把这两条放在整个 CSS 文件最顶部：
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }第一行给 html 设死 border-box，它不参与渲染，零副作用；第二行让所有元素（含伪元素）统一继承该值——既保证一致性，又保留后续覆盖能力。比如你在某个组件里写 .search-input { box-sizing: content-box; }，它依然能生效，不会被通配符拦截。
哪些元素必须手动切回content-box
-
input、textarea、select、button：光标位置、placeholder 对齐、拖拽拉伸后文字截断等问题集中爆发 -
svg text：iOS Safari 下offsetHeight读数会差 1–2px，影响 JS 布局判断 - 使用
transform: scale()做高精度适配的容器：像素对齐直接失准
推荐集中声明：
立即学习“前端免费学习笔记（深入）”；
input, textarea, select, button, svg text {
box-sizing: content-box;
}预处理器和第三方库场景下的关键避坑点
Sass 中别写 * { @extend %reset; } —— 它会破坏特异性计算，导致你后面加的规则莫名其妙不生效。
第三方库（如 Element Plus 或 Bootstrap）的样式通常只作用于自己的 class，所以要在其 wrapper 容器上做隔离：.el-form *, .bootstrap-button-wrapper * { box-sizing: content-box; }。
绝对不要加 !important，它会让所有调试类（比如 .debug-border）彻底失效，而且掩盖真实冲突源。
最常被忽略的验证环节：别只看 Chrome DevTools，得在 Safari、Firefox 和 iOS 模拟器里真机点按、拖拽、缩放，才能暴露那些只在特定渲染路径下才触发的盒模型偏差。
