<p>* 通配符重置 box-sizing 是最有效解法，因其精准轻量；normalize.css 不重置盒模型，仅对少数表单控件设 border-box，且忽略伪元素、边距、基础排版；reset.css 需手动补全三处配置；IE8 须用 -ms- 前缀并避免 inherit；第三方库易覆盖导致失效。</p>
直接用 * 通配符重置 box-sizing 是最有效、最轻量的解法，比引入整套 reset.css 或 normalize.css 更精准，也更可控。
为什么不能只靠 normalize.css 解决盒模型问题
normalize.css 的目标是“保留有用默认样式 + 修复已知 bug”，它不会主动把所有元素的 box-sizing 改成 border-box。它只对少数表单控件（如 input、textarea）做了 box-sizing: border-box 的显式声明，其余元素仍走浏览器默认的 content-box。这意味着你写了 width: 200px; padding: 16px;，在 Chrome 和 Safari 下依然会撑成 232px —— 差异照旧。
- 它不重置
*::before和*::after，而现代组件常依赖伪元素渲染图标或装饰，这些元素若仍是content-box，容易溢出或错位 - 它不统一
margin和padding，不同浏览器对h1、ul、blockquote的默认边距仍不一致，间接放大盒模型感知偏差 - 它不处理
html和body的基础排版属性（如line-height、font-size），这些会影响子元素的尺寸继承链
用 reset.css 时最容易漏掉的三处关键配置
很多项目直接 @import 一个现成的 reset.css 就以为万事大吉，但主流 reset 方案（比如 Eric Meyer Reset）默认并不包含 box-sizing 重置 —— 它只清 margin/padding，不管盒模型计算逻辑。
- 必须手动补上：
*,*::before,*::after{box-sizing: border-box; } - 必须确保
html和body有明确的font-size和line-height，否则rem或em单位在不同浏览器下基数不一致，导致padding实际像素值漂移 - 必须单独为表单控件加白名单重置，例如：
input, select, textarea, button{box-sizing: content-box; } —— 不是因为它们不该用border-box，而是某些旧版 Safari 对select在border-box下会截断文字，得按需回调
IE8 及以下浏览器中 box-sizing 的真实兼容边界
IE8 支持 box-sizing，但有两个硬限制：不支持 inherit 值，也不支持无前缀的 border-box 写法。如果你写 html { box-sizing: border-box; } * { box-sizing: inherit; }，IE8 会直接忽略整个规则块，退回到原始 content-box 行为。
立即学习“前端免费学习笔记（深入）”；
- 必须用通配符直写：
*,*::before,*::after{-ms-box-sizing: border-box;box-sizing: border-box; } - IE6/7 完全不识别
box-sizing，任何写法都无效；此时只能放弃精确尺寸控制，或用条件注释加载 JS hack（不推荐） - 即使加了
-ms-前缀，在 IE8 的怪异模式（quirks mode）下仍不生效 —— 所以务必确保页面开头有<!DOCTYPE html>，且<html>标签带lang属性，防止触发怪异模式
真正麻烦的不是怎么写那几行 CSS，而是你改完之后，第三方 UI 库（比如某个没升级的 Bootstrap 3 组件）可能内部又把 box-sizing 覆盖回去了，或者动态插入的 DOM 节点没被通配符命中。调试时别只看元素样式面板里的“最终计算值”，要切到“Layout”标签页，直接看 content / padding / border 的像素分段是否符合预期。
