box-sizing在ie6–7中完全不支持，需css重置加手动调整；css重置不能一劳永逸解决盒模型差异；flex/grid布局下仍需关注box-sizing，尤其在第三方库嵌套自定义内容时。
box-sizing 在老版 IE 中的兼容性问题
IE6–7 默认使用怪异盒模型（border-box），而标准浏览器用 content-box，这导致相同 CSS 在不同环境渲染不一致。现代开发中必须统一为 box-sizing: border-box，但 IE8 及以下不支持该属性值（IE8 支持但需文档模式为 IE8+）。
- 必须加
-webkit-box-sizing、-moz-box-sizing前缀，尽管现代浏览器已不需要，但若项目仍需兼容 Android 2.3 或 Firefox 19 以下版本，前缀仍有意义 - IE6–7 完全忽略
box-sizing，只能靠 CSS 重置 + 手动调整 padding/margin 模拟 border-box 行为，例如对表单控件单独设width: auto配合max-width - 使用
*width或\9hack 强制 IE7 及以下走另一套尺寸计算逻辑，但维护成本高，不推荐新项目采用
CSS 重置能否一劳永逸解决盒模型差异
不能。CSS 重置（如 Normalize.css 或 Eric Meyer Reset）只归一化默认 margin/padding 和部分 display 行为，并不触碰盒模型底层计算规则。
- Normalize.css 会将
input、button等元素设为box-sizing: border-box，但仅限这些元素，不会全局覆盖 - 自定义重置中常见写法：
* { box-sizing: border-box; }，但它在 IE6–7 下完全无效，且在某些 SVG 场景或表单控件中可能引发意外收缩（如textarea高度被 border 吃掉） - 更稳妥的做法是局部重置：
<em>, </em>::before, *::after { box-sizing: inherit; }，再让根元素设为border-box，兼顾继承性与可控性
Flex/Grid 布局下是否还要关心 box-sizing
要，但影响变小。Flex item 和 Grid item 的尺寸计算虽由容器控制，但其内部子元素仍遵循自身 box-sizing 规则。
- 当 flex item 内部有带 padding 的卡片组件时，若未设
box-sizing: border-box，padding 会撑大总宽，可能触发换行或溢出 - Safari 10–12 对
box-sizing在display: flex子元素上的继承存在 bug，需显式声明，不能依赖父级 inherit - 使用
fit-content或min-content作为 width 时，box-sizing仍会影响最终内容区域大小，尤其在响应式断点中容易误判可用空间
实际项目里最容易被忽略的是：第三方 UI 库（如 Ant Design、Element UI）的源码通常已处理好 box-sizing，但如果你在它们组件内部嵌套自定义区块并手动设了 padding 和 width: 100%，就很可能因缺失 border-box 导致横向滚动条意外出现。
立即学习“前端免费学习笔记（深入）”；
