Normalize.css仅重置默认样式，不处理伪类差异、UA渲染逻辑及交互属性，需手动补充button{outline:none;-webkit-appearance:none}等规则，禁与Reset.css混用，推荐npm安装并手动@import引入。
为什么直接用 Normalize.css 还是看到按钮样式不一致
因为 Normalize.css 只重置默认样式，不处理用户代理（UA）样式表里带 :hover、:focus 等伪类的差异，也不覆盖浏览器对 <button></button> 的内部渲染逻辑（比如 Chrome 的阴影、Firefox 的边框圆角）。
常见错误现象：button 在 Safari 里有蓝色外框、在 Edge 里点击后残留灰色背景、移动端长按出现半透明蒙层——这些都不是 Normalize.css 责任范围。
- 必须配合自定义重置：至少加
button { outline: none; -webkit-appearance: none; } - 移动端需额外处理：
-webkit-tap-highlight-color: transparent;否则点击高亮遮盖真实样式 - Normalize.css 不动
user-select、cursor等交互相关属性，得自己补
Normalize.css 和 Reset.css 混用会怎样
会冲突，且大概率让样式更难调试。Normalize.css 的设计哲学是“保留有用默认行为”，Reset.css 是“一律清零”，两者目标相反。
典型表现：h1 字体大小被 Normalize.css 设为 2em，又被 Reset.css 强制设为 1em；ol 的 margin 在 Normalize.css 里保留合理值，在 Reset.css 里被归零后列表项挤在一起。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要同时引入两个库的完整 CSS 文件
- 如果项目已用 Reset.css，别再加 Normalize.css——它解决的问题已被覆盖，新增的兼容性修复反而可能被覆盖掉
- 真要迁移，只取 Normalize.css 里对应你当前问题的片段，比如只复制
input[type="search"]相关规则
用 PostCSS 插件自动注入 Normalize.css 是否可靠
不可靠，尤其在构建流程复杂或有 CSS-in-JS 的项目里。PostCSS 插件（如 postcss-normalize）默认只处理 @import 或特定注释标记，不保证注入顺序，容易导致重置样式被后续样式覆盖。
使用场景限制明显：Webpack/Vite 默认支持 @import 'normalize.css'，但若你用的是 styled-components 或 Emotion，插件根本不会生效。
- 最稳方式：手动在入口 CSS 最顶部
@import 'normalize.css';（确保路径正确，推荐用node_modules/normalize.css/normalize.css） - 如果用 Sass/Less，避免用
@import 'normalize'（没扩展名易匹配错），写全@import '~normalize.css/normalize.css'; - 检查最终生成的 CSS 文件头部，确认 Normalize.css 内容确实在最前面，而不是被 webpack 的 style-loader 插到后面
CDN 引入 Normalize.css 时要注意什么
CDN 地址不是随便抄一个就完事。官方推荐的 https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css 是稳定版，但很多博客随手贴的链接指向过期版本（比如 v7.x），而 v8 对 dialog 元素和 accent-color 做了更新。
更麻烦的是 CSP（内容安全策略）拦截：如果站点启用了 style-src 'self'，CDN 外链会被直接拒绝加载，页面就退回到无重置状态。
- 优先用 npm 安装：
npm install normalize.css，再从node_modules引入，规避 CDN 不可用或 CSP 问题 - 如果必须用 CDN，把完整 URL 写进
style-src白名单，例如：style-src 'self' https://cdnjs.cloudflare.com - 别信“最新版”CDN 链接（如
latest或master分支），它们可能突然变更内容，引发线上样式错乱
