现代浏览器对box-sizing默认值统一为content-box；IE8及更早版本不支持该属性；Flex/Grid布局中box-sizing仍影响子项尺寸计算；安卓4.3以下WebView存在flex与border-box组合渲染缺陷。
box-sizing 默认值在各浏览器中是否统一
是的，现代浏览器（Chrome 10+、Firefox 29+、Safari 5.1+、Edge 12+）对 box-sizing 的默认值完全一致：所有 HTML 元素默认为 box-sizing: content-box。这个行为自 CSS2.1 规范起就已明确，不存在兼容性分歧。
真正出问题的不是默认值，而是开发者手动设置后，某些旧环境未生效——比如 IE8 及更早版本不支持 box-sizing，而 IE9+ 才开始支持。但这类浏览器如今基本退出主流场景。
IE8 及以下不支持 box-sizing 怎么办
IE8 及更早版本确实完全忽略 box-sizing 声明，此时元素始终按 content-box 解析，无法通过 CSS 切换为 border-box。没有纯 CSS 方案可绕过这一限制。
- 若必须兼容 IE8，只能放弃全局
box-sizing: border-box，改用传统 padding/margin 手动计算尺寸 - 或引入 JavaScript 补丁（如
boxsizing-polyfill），但该 polyfill 仅模拟行为，不改变真实盒模型计算逻辑，存在布局抖动和性能损耗 - 现代项目通常直接声明
/* IE8 不支持，不作降级 */并移除兼容要求
flex/grid 布局下 box-sizing 还重要吗
仍然重要，但影响方式不同。Flex 和 Grid 容器内部的子项尺寸计算仍受 box-sizing 控制——尤其是当子项设置了 width 或 flex-basis 时，border 和 padding 是否计入该宽度，取决于其自身的 box-sizing 值。
立即学习“前端免费学习笔记（深入）”；
常见误判是认为 “用了 Flex 就不用管 box-sizing”，结果在 IE11 或 Safari 10 中出现宽度溢出或错位。
稳妥做法仍是全局重置：
*, *::before, *::after {
box-sizing: border-box;
}注意：该重置在所有现代浏览器中表现一致，包括 iOS Safari 9.3+ 和 Android Browser 4.4+。
移动端 WebView 的盒模型兼容性陷阱
部分安卓低版本系统 WebView（如 Android 4.3 及更早）存在 box-sizing 解析 bug：当元素同时设置 display: flex 和 box-sizing: border-box 时，border 可能被错误地双倍计算或忽略。
这不是规范问题，而是渲染引擎缺陷。应对策略包括：
- 避免在 flex 子项上依赖
border精确占位，改用outline或伪元素模拟边框 - 对关键布局组件加 class 隔离，例如
.safe-box内部不混用flex+border+box-sizing: border-box - 使用
caniuse查证具体 WebView 版本支持情况，而非只看 Android 版本号
真正的难点不在语法兼容，而在旧引擎对组合属性的非标准实现——这种问题不会报错，只会悄悄错位。
