box-sizing在老IE中需加前缀兼容：-webkit-、-moz-、-ms-box-sizing（IE8），并确保声明顺序；优先级覆盖、flex/grid中需设min-width:0；移动端须配viewport且避免固定宽。
box-sizing 属性在老版 IE 中不支持怎么办
IE 6/7 完全不识别 box-sizing，IE 8 只支持带 -ms- 前缀的写法且仅限于某些渲染模式。直接写 box-sizing: border-box 在这些浏览器里会被忽略，导致宽高计算回归默认的 content-box，盒子尺寸就“突然变大”了。
解决方案是加前缀 + 回退声明，顺序不能错：
element {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box; /* IE 8 */
box-sizing: border-box;
}
注意：-ms-box-sizing 在 IE 9+ 已废弃，但保留它对 IE 8 兼容仍有意义；现代项目若已放弃 IE 8，可去掉 -ms- 前缀。
为什么设置了 box-sizing 还是没生效
常见原因是 CSS 优先级或继承覆盖。比如重置样式（如 normalize.css）或框架（如 Bootstrap）可能在更早的规则中设了 box-sizing: content-box，而你的声明没压过它。
排查和修复建议：
- 用浏览器开发者工具检查元素最终计算出的
box-sizing值，看是否被其他规则覆盖 - 把声明放到更具体的选择器下，或加
!important（仅调试时用） - 全局统一设置更可靠：在根选择器上一次性重置
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
border-box 在 flex 或 grid 布局中表现异常
当 box-sizing: border-box 和 flex / grid 混用时，某些浏览器（尤其是 Safari 14–15）对 padding 或 border 的尺寸压缩逻辑不一致，可能导致子项溢出或间隙错位。
这不是 box-sizing 本身的问题，而是布局引擎对“可用空间”的判定差异。关键点：
- Flex item 默认
min-width: auto，会阻止border-box的收缩行为 - 显式设置
min-width: 0或min-height: 0能让border-box正常参与尺寸分配 - Grid item 同理，尤其在
fr单位下，需配合min-inline-size: 0
典型修复写法：
.flex-item {
box-sizing: border-box;
min-width: 0; /* 关键：允许内容区域被压缩 */
padding: 12px;
border: 1px solid #ccc;
}
移动端 viewport 缩放导致 box-sizing 计算偏移
在 iOS Safari 中，如果页面未正确设置 viewport，或用户双指缩放后，1px 边框、border-box 宽度可能被设备像素比（dpr）干扰，出现视觉上的“多出几个像素”或“截断”。这不是 box-sizing 兼容问题，而是渲染层对物理像素的映射失准。
必须确保：
-
存在且无 typo - 避免给容器设固定
width（如width: 375px），改用max-width: 100%+box-sizing: border-box - 慎用
transform: scale()类操作，它会绕过box-sizing的逻辑
真正要盯住的，是那个被缩放影响的父容器是否还保持着预期的 layout boundary —— box-sizing 再标准，也救不了父级塌陷或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
