appearance: none 需配合浏览器前缀与视觉重置才能跨浏览器一致生效：Safari 15.3-需-webkit-appearance，Firefox 88-需-moz-appearance，且必须显式声明border、background等属性，并注意:focus-visible兼容性及作用域限制。
appearance: none 在 Chrome/Firefox/Safari 中表现不一致
直接写 appearance: none 在 Safari 15.4+ 会生效，但 Safari 15.3 及更早版本需要 -webkit-appearance: none；Firefox 自 89 版起支持无前缀写法，但 88 及之前必须用 -moz-appearance: none；Chrome 从 26 开始就只认 appearance 或 -webkit-appearance。单独写一个值，必然漏掉某个浏览器。
常见错误现象是：按钮在 Safari 里仍有圆角和阴影，在 Firefox 旧版里文字被压扁，或在某些 Edge 版本中边框无法清除。
- 始终把
-webkit-appearance: none放在最前面（覆盖 Safari/Chrome 的默认解析顺序） - 紧跟
-moz-appearance: none（覆盖 Firefox 88 及更早） - 最后写
appearance: none（现代标准，也兼容当前主流 Firefox/Chrome/Safari） - 不要依赖 Autoprefixer 自动生成——它默认不处理
appearance，需手动配置autoprefixer的browserslist并启用appearance插件支持
重置 button 时 appearance 必须配合 border 和 background 显式声明
appearance: none 只移除“外观控制权”，不重置视觉属性。比如 Safari 的 button 默认有 border: 1px solid 和 background-color: -webkit-focus-ring-color，仅设 appearance 后这些依然存在，导致样式残留。
典型使用场景是设计系统中统一按钮基类，如 .btn-reset。此时必须同步处理：
立即学习“前端免费学习笔记（深入）”；
-
border: none（否则 Safari 仍显示灰色细边） -
background: transparent（否则 Firefox 保留浅灰背景） -
padding: 0和margin: 0（各浏览器对 button 的默认内边距差异极大） -
line-height: 1（避免 Safari 中文字上下留白异常）
漏掉任意一项，都可能让「已重置」的按钮在某个浏览器中突然凸起、错位或文字截断。
appearance: none 与 :focus-visible 的兼容性冲突
当用 appearance: none 清除原生焦点环后，若想用 :focus-visible 手动加轮廓，Safari 15.6–16.4 存在 bug：即使元素获得键盘焦点，:focus-visible 也不触发。这是因为它把 appearance: none 当作“放弃所有 UA 样式控制”，连焦点检测逻辑也弱化了。
解决方案不是退回 :focus（会破坏无障碍），而是：
- 对 Safari 特定版本加
@supports (-webkit-appearance: none)条件判断 - 在该条件下，改用
:focus:not(:focus-visible)+:focus-visible组合兜底 - 或直接为
button设置outline: 2px solid var(--focus-color)并禁用outline-offset，绕过 UA 焦点逻辑
这个坑在设计系统中尤其隐蔽——自动化测试通常只跑最新版 Safari，而真实用户还在用 16.3。
不要在 reset.css 里全局设置 appearance: none
很多团队把 button, input[type="button"], input[type="submit"] { appearance: none; } 直接塞进全局 reset.css，结果导致所有第三方组件（如 DatePicker 的确认按钮、Modal 的关闭叉）失去原生可访问性样式，屏幕阅读器行为异常，甚至部分按钮点击区域缩小。
真正安全的做法是：
- 只在明确需要自定义样式的组件内部作用域中使用
appearance: none - 用 BEM 或 CSS Modules 限定作用域，例如
.my-button__inner而非全局button - 如果必须全局干预，至少保留
select、textarea、input[type="range"]等控件的原生appearance，它们的语义和交互强依赖 UA 实现
appearance 不是 margin 或 padding，它牵扯到渲染管线底层和辅助技术链路，越早意识到这点，后期修复成本越低。
