box-sizing 默认值因浏览器而异：IE6–7 为 border-box，现代浏览器为 content-box；全局重置为 border-box 最稳妥，需用 *, *::before, *::after 统一设置，并注意第三方库、伪元素及表单控件的兼容性。
box-sizing 默认值在不同浏览器中确实不一致
IE6–7 的 display: block 元素默认是 box-sizing: border-box，而 Chrome/Firefox/Edge 等现代浏览器默认是 box-sizing: content-box。这不是 bug，是历史兼容策略差异导致的——直接写 width: 200px 时，IE 会把 padding 和 border 算进 200px 里，其他浏览器则额外加出去，布局就错位了。
全局重置 box-sizing 是最稳妥的做法
不用等出问题再局部修，一开始就统一。核心就一行 CSS，但必须配合通配符和继承逻辑：
*, *::before, *::after {
box-sizing: border-box;
}这样所有元素（包括伪元素）都按 border-box 计算，后续写 width、height 就不会因浏览器差异意外溢出或缩窄。注意两点：
-
*选择器权重低，不会覆盖你后面显式写的box-sizing: content-box，该保留的仍可保留 - 不要只写
* { box-sizing: border-box; }，漏掉::before/::after可能导致伪元素尺寸计算异常（比如用伪元素做三角形或装饰时）
某些第三方组件会覆盖 box-sizing
像 Bootstrap 4+、Element UI、Ant Design 这类 UI 库，内部已设好 box-sizing，但它们通常只作用于自身 class（如 .btn、.el-input），不会影响你自定义的 wrapper 或 layout 容器。常见冲突场景：
立即学习“前端免费学习笔记（深入）”；
- 你写了全局
border-box，但引入的某旧版插件 CSS 里有.plugin-item { box-sizing: content-box !important; } - 用 Web Components（如 Shadow DOM）时，样式隔离导致外部重置不生效
应对方法很简单：检查 computed styles，发现异常就针对性覆盖，比如：
.plugin-item {
box-sizing: border-box !important;
}flex/grid 布局下 box-sizing 的影响变小但没消失
很多人以为用了 display: flex 就不用管 box-sizing 了，其实不然。例如：
- flex item 设置了
flex: 1，但内部有padding: 20px，如果它是content-box，实际占用宽度 = 内容宽 + 40px，可能撑破容器 - grid area 里放一个
width: 100%的卡片，若卡片是content-box且带border，就会横向溢出
所以即使主布局用 flex/grid，子元素仍需统一 box-sizing，否则响应式断点或动态内容插入时容易出现不可预期的滚动条或错位。
真正容易被忽略的是表单控件：<input>、<textarea></textarea> 在部分浏览器（特别是 Safari）中对 box-sizing 的继承行为不稳定，建议显式声明。
