normalize.css 能安全统一 button 的跨浏览器样式差异并保留可访问性，而 all: unset 会破坏语义和交互；引入后还需补充 border-radius: 0、box-shadow: none、focus 轮廓及 firefox 伪元素重置。
直接用 normalize.css 重置 button 默认样式就行
normalize.css 不会把 button 彻底“清零”，而是统一 Safari 的阴影、Firefox 的圆角、Chrome 的内边距等差异，保留可访问性（比如焦点轮廓、语义行为），比手写 * { margin: 0; padding: 0; } 安全得多。它本身不提供视觉设计，但为后续自定义留出干净、一致的起点。
为什么不能只靠 button { all: unset; }
all: unset 看似简洁，但它会同时移除 button 的 display: inline-block、cursor: pointer、甚至 type 属性的语义含义，导致键盘 Tab 焦点失效、屏幕阅读器无法识别可操作性。更严重的是，它不解决跨浏览器的渲染差异——比如 Safari 仍可能偷偷加 box-shadow，Firefox 仍可能保留奇怪的 border-radius。这不是重置，是“阉割”。
引入 normalize.css 后，button 还要额外补哪几条规则
normalize.css 解决了底层一致性，但没管设计层细节。你大概率还得加这几条显式声明：
-
button { border-radius: 0; }—— Safari 和旧 Edge 默认有圆角，不设为 0 会导致和设计稿对不上 -
button { box-shadow: none; }—— Safari 桌面版默认带浅灰阴影，不关掉会干扰配色 -
button:focus { outline: 2px solid #007bff; }—— normalize 保留原生 focus 样式，但默认色常不可见，必须手动定义可访问的焦点环 -
button::-moz-focus-inner { border: 0; }—— Firefox 特有伪元素，不重置会导致按钮内部多出虚线边框
Vue/React 项目里，normalize.css 加载顺序错会导致 button 样式失效
常见坑是：框架把组件样式注入得比 normalize.css 还早。结果就是你写的 button { border: none; } 被 normalize 的规则覆盖不了，或者反过来，normalize 的规则被 CSS-in-JS 动态生成的高特异性样式压住。
正确做法：
- Vue：在
main.js最顶部import 'normalize.css';，确保它在createApp()和任何app.use(...)之前 - React（CRA）：在
src/index.js第一行import 'normalize.css';，早于ReactDOM.render和所有 Provider - Next.js：在
_app.js顶部import 'normalize.css';，别放useEffect里，否则 FOUC（闪白）
如果用了 Tailwind 或 Bootstrap，注意它们内部已含部分 normalize 行为，重复引入会造成冗余计算，建议先查文档确认是否已内置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
