normalize.css 并非万能补丁，仅统一浏览器 ua 样式表中已知默认值差异；需首载、不干预交互态/平台态/新特性兼容，且忌与 ui 库内置校准或 reset.css 混用。
normalize.css 不是“一加就灵”的魔法补丁。它只解决浏览器用户代理样式表（UA stylesheet）中明确已知且有共识的默认值差异，比如 h1 的 margin-block-start、button 的 font-family 继承、textarea 的 vertical-align 行为等。如果你引入后仍看到样式不一致，大概率不是 normalize.css 失效了，而是你没踩对它的生效前提，或混淆了它能管和不能管的边界。
引入顺序错：normalize.css 必须是第一个 CSS 文件
normalize.css 的修复依赖 CSS 层叠规则中的声明顺序和 specificity。它靠前置声明“抢占” UA 样式的位置，再用更具体的规则覆盖掉浏览器各自的默认行为。一旦它被放在自定义样式之后，你的 button { border: 1px solid #ccc; } 就会先生效，而 normalize.css 后续试图统一的 border、padding、line-height 等基础值就全被跳过了。
- 错误写法：
<link rel="stylesheet" href="main.css"><br><link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
- 正确写法（HTML）：
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css"><br><link rel="stylesheet" href="main.css">
- Vite/Webpack 项目中，推荐在入口 JS（如
main.js）顶部写import 'normalize.css';，而非在 SCSS 中用@import—— 后者加载时机不可控，且可能被构建工具降级或忽略
它不管交互态、组件态和平台专属表现
normalize.css 只处理元素的“默认渲染态”，也就是页面刚加载完、没任何用户操作时的样子。它不会碰以下三类问题：
-
:hover、:focus、:active、:focus-visible等伪类样式（例如 Safari 的 focus ring 和 Chrome 的 outline 渲染逻辑不同，normalize.css不统一） - 表单控件的平台原生外观，比如 iOS 上
select的下拉箭头、input[type="date"]的日期弹窗 —— 这些由-webkit-appearance控制，normalize.css默认不重置 - 移动端特有的缩放、点击反馈、滚动条样式、
viewport行为等
常见现象：按钮在 Chrome 里聚焦有蓝色 outline，在 Safari 里是灰色圆环，且位置偏移。这不是 normalize.css 漏了，而是它压根不介入 :focus 的视觉实现。你需要自己加一层轻量 reset，比如：
button:focus,<br>input:focus,<br>select:focus,<br>textarea:focus {<br> outline: none;<br> box-shadow: 0 0 0 2px rgba(0, 100, 255, 0.3); /* 可访问性友好替代 */<br>}
你项目里可能已经自带了另一套 normalize-like 逻辑
很多现代 UI 库（如 Ant Design、Chakra UI、甚至 Tailwind CSS 的@layer base）内部已集成类似 normalize.css 的基础校准逻辑。如果你再手动引入一份，两套规则会在 html、body、button、input 等全局选择器上产生权重冲突或值覆盖。
- 构建产物里搜
line-height或font-size，如果出现多个来源（比如一份来自normalize.css，一份来自@ant-design/css），基本可以确认重复注入 - 判断方法：临时注释掉你手动引入的
normalize.css，看页面是否仍有合理的基础样式 —— 如果仍有，说明已有替代方案，不该再加 - 混用
reset.css和normalize.css是典型错误，前者清零语义行为（如fieldset边框、ol计数器），后者保留，两者叠加会导致不可预测的断裂
真正容易被忽略的是：它不解决新特性兼容问题。比如 gap 在 Flex 布局中仍需 -webkit-gap（Safari ≤16.4），aspect-ratio 在旧版 Firefox 中无效，:has() 在 Safari 15.4+ 才稳定 —— 这些都得靠 Autoprefixer + @supports 或 polyfill 来兜底，不是 normalize.css 的职责范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
