真正可落地的全局重置写法是html { box-sizing: border-box; }和, ::before, *::after { box-sizing: inherit; }，前者设死根元素盒模型零副作用，后者让所有元素含伪元素继承该值，既统一行为又保留后续覆盖能力。
为什么* { box-sizing: border-box }不是真正优雅的重置
它看似一劳永逸，实则埋了三处隐患：伪元素不继承、表单控件错位、后续样式难以覆盖。比如::before和::after在 Safari ≤12.1 中会回退到content-box，导致用伪元素画的三角或装饰边框尺寸错乱；input[type="search"]在 Safari 中若强制border-box，清除按钮（×）和光标位置会偏移；而通配符优先级过高，会让组件库里显式写的box-sizing: content-box被无声覆盖。
真正可落地的全局重置写法
把这两行放在项目 CSS 入口最顶部，顺序不能颠倒：
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }第一行给html设死border-box，它不参与渲染，零副作用；第二行让所有元素（含伪元素）继承该值——既统一行为，又保留覆盖能力。后续任何组件内写box-sizing: content-box都能生效，不会被暴力拦截。
哪些元素必须手动切回content-box
以下元素在 WebKit（Safari / 旧版 Chrome）中对border-box响应异常，需集中重置：
立即学习“前端免费学习笔记（深入）”；
-
input、textarea、select、button：光标偏移、placeholder 错位、拉伸后文字被截断 -
svg text：dominant-baseline计算失准，垂直居中失效 - 使用
transform: scale()做高精度适配的容器：像素对齐失准
建议统一声明：
input, textarea, select, button, svg text {
box-sizing: content-box;
}验证时最容易忽略的兼容性盲点
别只信 Chrome DevTools 的视觉预览。真实问题集中在：
- Safari 中
input[type="search"]的清除按钮与输入框右边界间距异常 - Firefox 下
textarea拖拽拉伸后，最后一行文字被下边框截断 - iOS Safari 对
svg text的渲染受box-sizing影响，哪怕 DOM 结构完全一样，offsetHeight读数也会差 1–2px
这些不是偶发 bug，而是盒模型切换后必然触发的底层渲染差异。只要项目涉及表单、SVG 或移动端高精度布局，就必须在三端实机或模拟器里逐个敲击、拖拽、缩放来确认。
