<p>不能只写 * { box-sizing: border-box; }，因其在 Safari ≤12.1 和部分 Android WebView 中无法匹配伪元素，导致 ::before/::after 仍为 content-box；高优先级易覆盖第三方组件（如 Ant Design 的 input）中显式声明的 box-sizing: content-box；且原生表单控件（input[type="search"]、textarea、select）在 WebKit 下强制 border-box 会引发内部布局挤压和文字截断。</p>
直接用 * { box-sizing: border-box; } 会出问题，尤其在 Safari ≤12.1、Android WebView 和部分表单控件里——伪元素尺寸错乱、input 光标偏移、textarea 最后一行文字被截断都是常见后果。
为什么不能只写 * { box-sizing: border-box; }
这个写法看似简洁，但有三个硬伤：
- 老版 Safari（≤12.1）和某些 Android WebView 中，
*::before和*::after可能不被匹配，仍按content-box渲染，导致下拉箭头、遮罩层等伪元素悄悄撑开 2px -
*优先级太高，容易覆盖第三方 UI 库中显式声明的box-sizing: content-box（比如 Ant Design 的input或 Element Plus 的select），引发 placeholder 错位或边框重叠 - 原生表单控件（
input[type="search"]、textarea、select）在 WebKit 内核下对border-box敏感，强制应用会导致内部布局挤压、文字渲染异常
推荐的全局设置组合
真正稳妥的做法是分层控制，把继承链搭清楚：
- 第一行：给
html元素设死box-sizing: border-box;—— 它不参与渲染，零副作用 - 第二行：用
*, *::before, *::after { box-sizing: inherit; }让所有后代（含伪元素）统一继承 - 第三行：对特殊元素“放行”，单独重置为
content-box，例如：input, select, textarea, button { box-sizing: content-box; }
这三行必须放在项目 CSS 最顶部，越早执行越少被覆盖。DevTools 里检查任意伪元素的 computed box-sizing，如果显示 border-box，说明继承链没断。
立即学习“前端免费学习笔记（深入）”；
Flex/Grid 容器里的子项必须单独声明
别指望父容器设了 border-box 就能“传染”给子项。在 Flex 布局中，flex-basis: 200px 的计算起点仍是 content-box 模式；Grid 里 grid-template-columns: 1fr 200px 的轨道大小也不影响格子内部元素的盒模型。
- Flex 项必须显式写
box-sizing: border-box;，否则加padding: 12px会让实际占用宽度 >flex-basis - Grid item 同理，
border-box不会从容器继承，每个需要精确控宽的卡片、表单项都得自己加 - 如果你用的是 Vue 的
<style scoped>或 React 的 CSS-in-JS，*选择器可能被隔离失效，更得靠显式声明
后台管理场景下的典型踩坑点
后台页面最常出问题的地方，往往不是主内容区，而是那些“看起来不重要”的细节：
- 表格单元格（
td）加了padding后列宽错位？检查它是否继承了border-box，或者被框架样式覆盖 - 折叠侧边栏里的菜单图标和文字上下不对齐？很可能是
svg或iconfont的line-height和box-sizing冲突，svg text对border-box极其敏感 - 弹窗表单提交后，
textarea拉伸后最后一行文字看不见？90% 是box-sizing: border-box强制压缩了内容区高度，改回content-box即可
后台系统往往集成多个组件库，box-sizing 的冲突比展示型页面更隐蔽——它不会报错，只会让像素差一点点，滚动条突然出现，或某列内容被莫名截断。调试时别只盯着 Chrome，真机连上 Safari 和旧版 Edge 才能暴露真实问题。
