统一使用 box-sizing: border-box 可解决浏览器盒模型差异问题。标准模型 width 仅含 content，而 IE 模型将 padding 和 border 算入 width；通过全局设置 , ::before, *::after { box-sizing: border-box } 可使尺寸计算一致，避免布局溢出，提升响应式设计可控性，现代浏览器及 IE8+ 均支持，兼容性良好。
不同浏览器对盒模型的渲染方式不同，尤其是老版本IE与标准浏览器之间存在差异，容易导致布局错位。解决这一问题的关键是统一使用 box-sizing 属性来控制元素的尺寸计算方式。
理解盒模型差异
在标准盒模型（content-box）中，元素的宽度仅包含 content，padding 和 border 会额外增加总宽高。而 IE 盒模型（border-box）则把 padding 和 border 包含在设定的 width 和 height 内。这种差异会导致相同 width 值在不同环境下实际占用空间不同。
使用 box-sizing 统一处理
通过设置 box-sizing: border-box，可以让所有元素的宽度包含 content、padding 和 border，从而消除浏览器默认行为带来的不一致。
常用重置方式：- 全局设置所有元素使用 border-box 模型
- 避免因 padding 或 border 导致布局溢出
- 提升响应式布局的可控性
推荐在 CSS 初始化时加入：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}
兼容性支持情况
box-sizing 在现代浏览器中支持良好，IE8 及以上版本均可使用。对于需要兼容低版本 IE 的项目，可结合条件注释或使用 polyfill 辅助处理，但大多数情况下直接应用即可有效解决盒模型问题。
基本上就这些，用 box-sizing: border-box 统一盒模型，能大幅减少因浏览器差异引起的布局问题。不复杂但容易忽略。
