CSS中切换为IE盒模型的核心是box-sizing: border-box，它使width/height包含content、padding和border；默认content-box会导致总宽增加而易溢出，border-box则向内压缩content空间；推荐全局用,::before,*::after重置，并注意table元素兼容性。
CSS 中切换为 IE 盒模型，核心是使用 box-sizing: border-box。它让元素的 width 和 height 包含 content、padding 和 border，这正是传统 IE5.5–7 的“怪异模式”盒模型行为——所以常被称作“IE 盒模型”，但实际是现代标准支持的、更直观的尺寸控制方式。
为什么需要 border-box？
默认的 box-sizing: content-box（标准盒模型）下，设置 width: 200px; padding: 10px; border: 1px solid，元素总宽度会变成 200 + 10×2 + 1×2 = 222px，容易导致布局溢出或计算错乱。而 border-box 下，这三项都压缩在 200px 内，padding 和 border 向内“吃掉” content 空间，尺寸更可控。
全局启用 border-box（推荐做法）
在项目开头统一重置盒模型，避免逐个写样式：
- 用通配符选择器覆盖所有常规元素（注意性能影响极小，现代浏览器已优化）
- 保留表单控件等可能依赖默认行为的元素（如
input[type="button"]在某些旧版本中需单独处理，但多数场景无需）
示例：
立即学习“前端免费学习笔记（深入）”；
*,
*::before,
*::after {
box-sizing: border-box;
}
按需局部应用 border-box
并非所有元素都需要——比如想精确控制 icon 图标内部 content 尺寸时，仍可用 content-box。常见适用场景包括：
- 响应式栅格容器（如
.col-6）、卡片、按钮等需固定占位的块级元素 - 带内边距的输入框：
input[type="text"] { width: 100%; padding: 8px; box-sizing: border-box; } -
绝对定位元素配合
top/right/bottom/left时，避免因 padding/border 导致偏移超出预期
兼容性与注意事项
box-sizing 自 IE8 起就获得全支持（IE8+、Edge、Chrome、Firefox、Safari 均无前缀），无需加 -moz- 或 -webkit-（仅极老 Android 2.3 需 -webkit-box-sizing，现基本可忽略）。
注意：该属性不继承，子元素不会自动获得父级的 box-sizing 值，所以全局重置最稳妥；另外，table 元素及其部分子元素（如 td）在部分浏览器中对 border-box 行为有细微差异，若用于复杂表格布局，建议实测。
