appearance: none 必须配合前缀和视觉重置：-webkit-appearance: none、-moz-appearance: none；并清除 border、background、padding、margin、font、cursor 等默认样式，避免各浏览器渲染差异。
appearance: none 必须配齐前缀和视觉重置
直接写 appearance: none 在 Safari 15.4+、Firefox 80+、Chrome 84+ 没问题，但老版本仍需 -webkit-appearance: none 和 -moz-appearance: none。光加这三行远远不够——appearance: none 只是“交出绘制权”，不等于“清空样式”。Safari 的 input[type="submit"] 默认带 border: 1px solid 和 box-shadow，Firefox 会偷偷加 background-color: ButtonFace，Chrome 则可能保留 padding 差异。
-
border: none—— 否则 Safari 仍显灰色细边 -
background: transparent—— 否则 Firefox 留浅灰底色 -
padding: 0; margin: 0—— 各浏览器默认内边距不一致，尤其 iOS Safari 初始 padding 偏大 -
font: inherit—— 防止字体、字号、行高继承异常（比如 Safari 中文字上下留白） -
cursor: pointer——appearance: none不保证鼠标态，必须显式声明
为什么不能只用 all: unset 或通配符重置
all: unset 看似一劳永逸，但它会干掉 input[type="submit"] 的 display: inline-block、cursor: pointer，甚至破坏 type 属性的语义含义。结果是：Tab 键无法聚焦、屏幕阅读器读不出“可点击按钮”、表单提交逻辑失效。更隐蔽的问题是，它不解决渲染差异——Safari 仍可能渲染原生阴影，Firefox 仍保留 border-radius: 2px，你写的 border-radius: 4px 会被 UA 样式覆盖或叠加。
- 通配符重置（如
* { margin: 0; padding: 0 }）权重太低，容易被后续组件样式覆盖 - 它对
input[type="file"]或select这类元素会直接抹掉原生交互区域，导致点击失灵 - 移动端 iOS Safari 中，
all: unset可能让 submit 按钮首次加载时圆角异常，点一下才“修复”——这是 UA 渲染延迟触发的 bug
reset 按钮和 submit 按钮要分开处理
input[type="reset"] 和 input[type="submit"] 虽然都是按钮，但浏览器对其 UA 样式处理不同。Safari 对 reset 按钮额外加了 opacity: 0.8（仅 hover 时恢复），Chrome 则默认给 reset 按钮更低的 contrast。如果共用同一套重置规则，很可能在某个浏览器里 reset 按钮看起来“发灰”或“不可点”。
- 推荐统一改用
和，它们比input更可控，文案也可自由定制 - 若必须用
input，需单独加规则：input[type="reset"] { opacity: 1; }（Safari 专用兜底） - 注意
button[type="reset"]默认行为是还原初始 value，不是清空；想清空得用 JS，这点和样式无关但常被混淆
normalize.css 是起点，不是终点
引入 normalize.css 能统一 button 的基础渲染（比如 Safari 的阴影、Firefox 的圆角、Chrome 的 line-height），但它不负责设计层。你仍需手动补全几条关键规则，否则“已重置”的按钮在设计稿里依然错位。
-
button { border-radius: 0; }—— Safari 和旧 Edge 默认有圆角，不设为 0 会和 UI 设计对不上 -
button { box-shadow: none; }—— Safari 桌面版默认带浅灰内阴影，不关掉会干扰品牌色 -
button:focus { outline: 2px solid #007bff; }—— normalize 保留原生 focus，但默认色在浅背景上不可见 -
button::-moz-focus-inner { border: 0; }—— Firefox 特有伪元素，漏掉会导致按钮内部多一圈虚线边框
真正容易被忽略的是：appearance 重置后，各浏览器对 vertical-align 的默认值仍不同，文字在按钮中偏上/偏下很常见。加一句 line-height: 1; vertical-align: middle; 才算收尾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
