使用 box-sizing: border-box 可解决浏览器盒模型不一致问题。默认 content-box 模式下宽高不含内边距和边框，易导致布局溢出；而 border-box 模式下宽高包含内容、内边距和边框，更易控制布局。通过 ,::before,*::after { box-sizing: border-box; } 全局设置可统一所有元素的计算方式，推荐结合 html { box-sizing: border-box; } 与继承写法实现灵活管理。该属性在 IE8+ 支持，旧版 IE 需条件注释处理。配合 Normalize.css 重置默认样式可进一步提升跨浏览器一致性，增强布局可预测性与维护性。
不同浏览器对CSS盒模型的解析方式可能不一致，尤其在处理 width 和 padding、border 的关系时。为确保布局在所有浏览器中表现一致，使用 box-sizing 属性统一计算方式是最有效的解决方案。
理解 box-sizing 的两种模式
content-box（默认值）：元素的宽度仅包含内容区域，padding 和 border 会额外增加总宽高。这容易导致布局超出预期。
border-box：元素的宽度包含了内容、内边距和边框，更便于控制布局尺寸，推荐用于现代开发。
全局设置 border-box 统一盒模型
通过以下CSS代码，将所有元素的盒模型设为 border-box，避免因浏览器差异导致的布局错乱：
立即学习“前端免费学习笔记（深入）”；
*,
*::before,
*::after {
box-sizing: border-box;
}
这样设置后，无论元素是否添加 padding 或 border，其设定的 width 和 height 都不会被撑开，提升布局可控性。
兼容旧版本浏览器的注意事项
虽然现代浏览器都支持 box-sizing，但若需支持 IE7 及更早版本，应注意：
- IE8 及以上才完全支持
box-sizing: border-box - 对于必须兼容的老版本IE，可借助条件注释或重置样式表单独处理
- 实际项目中建议结合 Normalize.css 重置默认样式，增强一致性
结合重置样式提升兼容性
除了设置 box-sizing，建议配合通用CSS重置，消除浏览器默认样式差异：
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
这种方式通过继承机制更灵活地管理盒模型，适合组件化开发场景。
基本上就这些。统一使用 box-sizing: border-box 并配合全局重置，能有效解决跨浏览器盒模型不一致的问题，让布局更 predictable 和易于维护。
