Normalize.css 更靠谱，因为它统一各浏览器对原生元素的渲染基线（如 h1 margin、video display），而非粗暴清空样式；它不处理伪元素、设计规范或现代特性兼容，需手动补丁并注意加载顺序与升级维护。
为什么直接用 Normalize.css 比自己写重置更靠谱
因为浏览器默认样式差异不是“有没有 margin”，而是“button 在 Safari 里有内阴影、在 Firefox 里没，input[type="number"] 在 Chrome 可以上下箭头、在 Edge 默认隐藏”——这些细节靠手写 * { margin: 0; padding: 0; } 压根拦不住。
Normalize.css 不是清空一切，是让各浏览器对同一元素渲染出接近一致的基线表现，比如统一 h1 的上下 margin 比例、修正 audio 和 video 的默认 display 值。
常见错误现象：
– 引入后表单控件反而更难看（没配字体/颜色）
– 用着用着发现 select 下拉箭头在 iOS 上消失了（Normalize 不处理伪元素，得自己补）
– 把 Normalize 当成万能解药，结果自定义组件依然错位（它只管原生元素）
实操建议：
– 用官方 CDN 最省事：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
– 别把它放在自己 CSS 后面，否则你的 body { font-size: 16px; } 可能被 Normalize 里更宽泛的选择器覆盖
– 如果项目已用 Tailwind 或 Bootstrap，别硬加 Normalize：Tailwind 自带 @layer base 处理过基础样式，Bootstrap 5 起也内置了类似逻辑
Normalize.css 加载顺序和位置怎么摆才不翻车
加载时机不对，h2 字体大小可能先按浏览器默认渲染一帧，再跳变成 Normalize 设定值，肉眼可见“闪一下”。这不是 bug，是 CSS 加载阻塞导致的渲染时序问题。
立即学习“前端免费学习笔记（深入）”；
实操建议：
– 放在所有自定义 CSS 文件之前，但必须在 <style> 标签或 <link> 引入的其他重置类样式之前
– 不要用 @import 在 CSS 里引入 Normalize（会阻塞后续规则解析）
– 如果用构建工具（如 Vite/Webpack），确保它被 import 'normalize.css'; 进入口 JS，而不是靠 HTML link 异步加载
– 避免在 <body> 底部放 Normalize 的 <link>，那样用户会看到未样式化内容（FOUC）
用了 Normalize.css 还要自己写哪些兼容补丁
Normalize 解决的是“同名元素在不同浏览器是否表现一致”，但它不管“这个设计稿要求所有 input 必须带 1px 灰色边框 + 圆角”，也不管“iOS 上 textarea 拉拽手柄太丑”。这些得你亲手填。
常见要手动补的点：
– input:focus 和 textarea:focus 在 Safari 移动端默认有高亮蓝框，得加 outline: none; 并换成本地 focus 样式
– button 在 Firefox 中默认有 text-transform: none;，而 Chrome 是 none，但设计稿要求全部大写，就得显式写 text-transform: uppercase;
– appearance 属性在旧版 Safari 和 Android Browser 上支持差，想统一去掉 select 原生下拉箭头，得配多套前缀：-webkit-appearance: none; -moz-appearance: none; appearance: none;
性能提示：这类补丁尽量写成原子类（如 .input-reset），别堆在全局 input 选择器里，否则每个 input 元素都要匹配一遍冗余规则
要不要把 Normalize.css 打包进自己的 CSS 文件
可以，但得清楚代价：一旦打包，你就失去了快速升级 Normalize 的能力。比如某天发现 details/summary 在新版 Safari 渲染异常，官方已在 Normalize 9.0 修复，而你锁死在 8.0 的打包版本里，就得手动 diff 补丁。
实操建议：
– 小项目、内部系统、离线环境：直接打包，减少 HTTP 请求，可控性强
– 对外网站、长期维护项目、CI/CD 流程成熟：用 CDN + SRI（Subresource Integrity），例如：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css" integrity="sha256-7rIeZuB4gQ9AaYjN7RfUJ+XkzCwE7xLqKQmSsGvTc=" crossorigin="anonymous">
– 构建时用 PostCSS 插件（如 postcss-normalize）自动注入，比手动 copy 更可持续
– 别用 unpkg 或 raw.githubusercontent.com 这类无 SLA 保障的源，生产环境容易 404
最常被忽略的一点：Normalize.css 本身不处理 CSS 变量、Flex/Grid 兼容、prefers-reduced-motion 响应——这些得你自己基于它再建一层基础样式层，否则“兼容”只是幻觉
