box-sizing: border-box 能统一跨浏览器盒模型计算方式，使 width/height 始终包含 padding 和 border；推荐全局设置 *, *::before, *::after { box-sizing: border-box; }，旧版 IE 需降级处理，Flex/Grid 中仍需显式声明。
为什么 box-sizing: border-box 能解决跨浏览器盒模型差异
IE6–8 的怪异模式默认把 width 和 height 解释为「内容 + 内边距 + 边框」，而标准模式（及 Chrome/Firefox/Safari）默认是「仅内容区域」。这种根本性差异导致同一组 width、padding、border 在不同浏览器里渲染出不同总宽度。用 box-sizing: border-box 强制所有浏览器按「IE 怪异模式逻辑」计算尺寸，是最直接的对齐手段。
全局重置盒模型的推荐写法
不要只给某个 class 加 box-sizing，要从根上统一。现代项目应直接在 CSS 开头写：
*, *::before, *::after {
box-sizing: border-box;
}这个写法覆盖所有元素及其伪元素，包括动态插入的节点。注意两点：
-
*选择器性能影响极小，现代浏览器已优化，无需担心 - 必须包含
*::before和*::after，否则像::before { content: ""; display: block; width: 100px; }这类伪元素仍走默认content-box，可能意外溢出
旧项目兼容 IE8 及以下时的注意事项
IE8 支持 box-sizing，但需要厂商前缀；IE7 及更早完全不支持。如果必须兼容 IE7：
立即学习“前端免费学习笔记（深入）”；
- 放弃全局
box-sizing，改用显式尺寸控制：所有带padding或border的块级容器，手动用width: calc(100% - 20px)补偿（假设左右padding共 20px） - 避免在 IE7 中依赖弹性布局或 Grid，优先用浮动+负 margin 模拟等宽列
- 用条件注释加载单独的 IE7 专用样式表，里面禁用所有
box-sizing相关声明
Flex/Grid 布局中 box-sizing 容易被忽略的点
即使用了 display: flex 或 display: grid，子项的 box-sizing 依然生效。常见陷阱：
- 一个
flex-item设了padding: 10px但没设box-sizing: border-box，它的flex-basis仍按内容宽计算，实际占位会变大 - Grid item 的
minmax(200px, 1fr)遇到border: 2px solid且box-sizing: content-box时，最小宽度实际是 204px，可能破坏网格对齐 - React/Vue 组件库中封装的按钮、卡片常自带内边距和边框，若未统一
box-sizing，嵌套使用时尺寸会逐层膨胀
真正起效的不是加一行 box-sizing，而是确保它在 DOM 树最顶端就生效，并贯穿所有动态生成的内容。伪元素、Shadow DOM、iframe 里的样式都需要单独处理——这点很容易漏。
