直接写box-sizing: border-box通常不够，错位主因是伪元素、第三方组件或父容器未同步修改，导致部分节点仍按content-box计算；必须用, ::before, *::after { box-sizing: border-box; }全局覆盖并置于css最顶部，同时精准覆盖第三方类名及伪元素，排查以computed面板为准。
直接写 box-sizing: border-box 通常不够——错位还在，大概率是伪元素、第三方组件或父容器没同步改，导致部分节点仍按 content-box 计算。
为什么写了 box-sizing: border-box 还错位
常见原因不是语法错，而是覆盖不全：伪元素（::before/::after）不继承该属性，第三方 UI 库（如 .el-input、.ant-btn）内部样式用 !important 或更高权重覆盖了你的全局声明，还有旧版 Safari 对 <input> 和 <textarea></textarea> 的支持不稳定。
检查方法很简单：打开 DevTools，选中错位元素，看「Computed」面板里 box-sizing 的最终值。如果显示 content-box，说明它没被你写的规则生效。
- 只写
* { box-sizing: border-box; }会漏掉伪元素 - UI 库的 CSS 文件加载在你之后，自然覆盖你的声明
- 某些表单控件在 Safari 13.1 之前无视
border-box，哪怕写了也回退
真正生效的写法必须包含伪元素
把这条规则放在所有 CSS 文件最顶部（不是某个局部文件里），确保优先级最高：
*,
*::before,
*::after {
box-sizing: border-box;
}
这不是“多此一举”，而是必需动作。很多清浮动、图标装饰、状态提示都靠伪元素实现，它们一旦仍是 content-box，加个 border: 1px 就多占 2px，百分比布局立刻偏移。
- 不要只写
*，否则::before里加个padding: 4px就撑开容器 - 不要放在 reset.css 末尾，要放在项目主 CSS 入口的最开头
- 如果用了 CSS-in-JS，得在全局 style 标签或主题注入层里显式设置
box-sizing: inherit
遇到第三方组件错乱怎么办
别硬刷全局 !important，先定位具体类名再精准覆盖。比如 Element Plus 的输入框错位，查到实际渲染的是 .el-input__inner，就单独写：
.el-input__inner {
box-sizing: border-box !important;
}
更稳妥的做法是连伪元素一起覆盖：
.el-input__inner,
.el-input__inner::before,
.el-input__inner::after {
box-sizing: border-box !important;
}
- Shadow DOM 组件（如某些 Web Components）外部样式无效，得用
:host或::part()调整 - Bootstrap 4+ 自带
box-sizing声明，重复写会导致权重冲突，建议删掉自己的全局重置，改用命名空间隔离 - 遇到
<input type="search">在 Safari 中光标偏移，可加width: calc(100% - 2px)回退容错
旧浏览器（IE7 及以下）没法用 box-sizing 怎么办
IE7 及以下完全不识别 box-sizing，连前缀都不行。这时候只能手动减去 padding 和 border：
.btn {
width: 100px;
padding: 4px 12px;
border: 1px solid #ccc;
/* IE7 回退 */
*width: calc(100px - 24px - 2px); /* 星号 hack 只对 IE7 生效 */
}
但注意：calc() 在 IE9 才开始支持，IE7–8 得用条件注释或 JavaScript 补丁。更现实的做法是：对这些老浏览器放弃精确像素控制，改用 height + line-height 显式定高，再统一 padding 和 border 值，靠视觉对齐而非尺寸计算。
- IE6–7 必须触发
hasLayout，加zoom: 1或display: inline-block -
<button></button>在 IE 中还受font-size和line-height隐式影响，光调box-sizing没用 - 别指望
box-sizing在怪异模式下工作——必须存在，否则 IE8 也会退回到 <code>content-box
真正麻烦的从来不是写那行 box-sizing: border-box，而是确认它在哪生效、在哪失效、被谁覆盖、又漏了谁。伪元素、第三方组件、旧浏览器——这三个点漏掉任何一个，错位就还在那儿，不动声色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
