应查DevTools「Computed」面板中box-sizing值，若显示content-box而全局已设border-box，说明被第三方样式用!important或高权重覆盖；需精准定位类名（如.el-input）并显式覆盖伪元素。
第三方组件box-sizing被覆盖怎么查
打开 DevTools → 选中异常元素 → 看「Computed」面板里的 box-sizing 值。如果显示 content-box，但你项目里写了全局重置，说明第三方样式用 !important 或更高权重覆盖了它。
常见干扰源包括：Normalize.css、Bootstrap 3 的重置规则、UI 库的内联样式或高优先级类名（如 .ant-btn、.el-input__inner）。某些 Web Components 还用了 Shadow DOM，外部样式根本进不去。
- 先禁用所有自定义 CSS，确认是否恢复正常——能快速定位是不是你的样式在打架
- 用「Styles」面板逐条勾选/取消，看哪条声明让
box-sizing变成content-box - 检查是否重复引入：Vite 或 Webpack 项目里，
SCSS @import和插件可能把多份重置混在一起
覆盖第三方组件box-sizing要写对选择器
别用 * { box-sizing: border-box !important; } 硬刷——它会把 <input>、<select></select> 这些原生控件也拉进 border-box，结果文字截断、内边距错位更严重。
应该精准定位到具体类名，并显式带上伪元素：
立即学习“前端免费学习笔记（深入）”；
.el-input, .el-input__inner,
.ant-btn, .ant-input,
.btn, .form-control {
box-sizing: border-box !important;
}
.el-input::before, .el-input::after,
.ant-btn::before, .ant-btn::after {
box-sizing: inherit !important;
}- 若组件用 Shadow DOM，外部样式无效，得改用
:host或::part()（需组件本身支持） - 对
<input>、<textarea></textarea>等表单控件，建议单独加白名单回退：input, select, textarea { box-sizing: content-box; }，再按需局部覆盖 - IE8 需补
-ms-box-sizing: border-box;，现代项目可忽略
flex/grid 子项box-sizing不继承怎么办
box-sizing 不是从 flex 容器或 grid 容器继承来的。就算父容器设了 border-box，子项默认仍是 content-box，导致 flex-basis: 200px 实际占位超 200px（因为 padding/border 没算进去）。
必须显式给子项加声明：
.grid-item,
.flex-item {
box-sizing: border-box;
}- 不要指望
display: flex自动带border-box，这是常见误判点 - Grid 中
grid-template-columns: 1fr 200px的200px是轨道大小，但格子内部元素是否溢出，取决于它自己的box-sizing - 用
min-width: 0配合border-box，防止内容区因最小尺寸约束无法收缩
旧版 Safari 表单控件无视box-sizing怎么兜底
Safari 12 以前的版本对 <input>、<select></select> 的 box-sizing 支持不稳定，即使写了 border-box，也可能回退到 content-box 行为，尤其在缩放或 zoom 场景下。
最稳妥的容错是手动减掉边框和内边距：
input[type="text"],
select {
width: calc(100% - 2px);
padding: 4px;
border: 1px solid #ccc;
}- 只对已知有问题的浏览器加，可用
@supports not (box-sizing: border-box)包裹 - 不要全局用
calc()替代box-sizing，维护成本高且易漏 - 伪元素（
::before/::after）最容易漏覆盖，它们默认不继承box-sizing，必须单独声明
真正难调的不是声明本身，而是不同层级的覆盖逻辑叠加后，computed 值和视觉表现之间的延迟反馈。每次改完记得清缓存、硬刷新，再看 Computed 面板——别信 Styles 面板里“写着”的那条。
