Modern-reset表现不一致是因为各浏览器内核对HTML规范实现不同，如button字体继承、input[type="number"]的appearance等差异无法靠简单清零覆盖；而Normalize.css通过校准语义元素行为（如统一h1–h6 margin、video显示模式）实现真正跨浏览器一致性。
为什么 Modern-reset 在不同浏览器里表现不一致
Modern-reset 这类自定义重置方案往往只覆盖 * { margin: 0; padding: 0; } 或简单清空表单样式，但浏览器内核（Blink/WebKit/Gecko/Trident）对同一 HTML 元素的默认行为差异远不止于此：比如 button 是否继承 font-family、input[type="number"] 在 Safari 中的 appearance 行为、details 的折叠状态渲染、甚至 sub/sup 的 vertical-align 偏移量。这些不是“bug”，而是各内核对 HTML 规范实现程度不同导致的合理差异。靠手写几条规则根本覆盖不全。
Normalize.css 为什么比手写重置更可靠
它不追求“看起来一样”，而是让“语义行为一致”：保留 em 斜体、strong 加粗、ol 计数器、fieldset 边框这些有用默认，只修正真实存在的跨内核偏差。例如：
-
audio和video在 Chrome 默认有宽高，Safari 默认无——normalize.css统一设为display: inline-block并补默认尺寸 -
h1到h6在 Firefox 下 margin-top 更大——normalize.css显式重设所有 heading 的上下 margin 比例 -
textarea在旧 Edge 中无法 resize——它补了resize: vertical并修复滚动条渲染
引入顺序错位会导致 Normalize 失效
常见错误是把 normalize.css 放在框架 CSS 之后，或在组件 scoped style 里 import。结果就是框架的 body { margin: 0; font-size: 16px; } 覆盖了 normalize 对 body 的基础设置（如移除默认 margin、统一 line-height）。必须确保：
- HTML 中：
<link>标签排在所有其他 CSS 之前 - Vite/Webpack 项目中：
import 'normalize.css';写在main.css或入口 JS 的最顶部 - 禁用任何构建插件对 CSS 加载顺序的自动调整（比如某些 PostCSS 插件会重排 @import）
别指望 Normalize 解决所有布局问题
它不管 box-sizing、不设全局字体、不处理 Flex/Grid 兼容性，也不改 img 的 max-width。这些得你自己补：
立即学习“前端免费学习笔记（深入）”；
- 在
normalize.css后、框架前加一层base.css，至少包含：* { box-sizing: border-box; }、img { max-width: 100%; height: auto; } - 遇到
input[type="search"]在 Safari 失去圆角——别删 normalize 里的appearance: textfield，那是它刻意保留的原生行为 - 调试时直接看 DevTools 的 Computed 面板，查
margin-top来源，而不是凭感觉猜“是不是没生效”
真正难的不是引入文件，而是理解 normalize.css 不是“重置”，是“校准”——它默认不动 div、span 这类通用容器，只动那些浏览器真正在意的语义元素。漏掉这点，就容易把正常表现当成 bug 去覆盖。
