appearance: none（含前缀）是消除 button 内置留白与边框的关键，需配合 border: none、background: transparent、padding: 0、margin: 0、line-height: 1、box-shadow: none 六项属性；:focus-visible 替代 outline: 0 保障可访问性。
单靠 border: none 或 outline: none 无法真正消除 button 的内置留白与边框——浏览器 UA 样式对 button 的硬编码控制远比表面看到的复杂。
为什么 border: none 和 padding: 0 还有残留间隙？
Chrome 默认给 button 加了约 6px 内边距和浅灰 border；Firefox 不仅加 box-shadow，还悄悄塞了额外 margin；Safari 则死守 -webkit-appearance: button，自带圆角、内阴影、甚至忽略你设的 font-size。这些都不是“样式覆盖”能简单解决的，而是底层渲染开关没关掉。
只写 border: none，Safari 仍用系统默认 1px solid 边框；只写 padding: 0，Firefox 可能因 line-height 或 UA min-height 导致实际高度仍膨胀。
-
appearance: none（含前缀）是真正移交控制权的关键，漏掉任意一项（-webkit-/-moz-/ 标准）都会在对应浏览器里失效 - UA 默认的
padding范围从2px到8px不等，必须显式重置，不能依赖继承 - 旧版 IE（IE6–7）不支持
appearance，需配合display: inline-block; zoom: 1触发 hasLayout
必须同时声明的五项核心属性
缺一不可，顺序无关，但建议按逻辑分组书写：
-
border: none—— 清除物理边框（注意：部分 Safari 版本会 fallback 到box-shadow，所以还得补下一条） -
background: transparent—— 移除默认灰色背景块，否则按钮看起来仍是“凸起”的 -
padding: 0和margin: 0—— 各浏览器 UA 值差异极大，必须显式归零 -
line-height: 1—— 防止 Safari 中文字上下留白异常，导致按钮高度突兀 -
box-shadow: none—— Safari 桌面版默认带浅灰内阴影，不写这行，阴影仍在
示例写法：
button {
border: none;
background: transparent;
padding: 0;
margin: 0;
line-height: 1;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
兼容性与可访问性的平衡点
全局删 outline 是反模式。键盘用户依赖焦点反馈，但又不能让鼠标点击后留下难看的虚线框。正确做法是用 :focus-visible 替代：
- 只在键盘触发聚焦时显示轮廓：
button:focus-visible { outline: 2px solid #007bff; } - 避免写
outline: 0—— 它不是标准值，且部分浏览器会忽略 - 若需支持旧浏览器（如 Firefox @supports selector(:focus-visible) 做渐进增强
另外，normalize.css 是个好起点，但它不等于完成：它不会帮你加 border-radius: 0（Safari/Edge 默认圆角），也不会重置 vertical-align（inline 场景下按钮易错位），这些都得手动补。
容易被忽略的细节：字体与盒模型联动
button 在 IE 和某些 Safari 版本中，font-size 会影响实际高度计算，尤其当它和 input 并排时。实操建议：
- 统一设置
font: inherit，确保字体继承自父级，避免 UA 强制缩放 - 对 IE8+ 显式加
box-sizing: border-box，但 IE6–7 必须放弃该属性，改用height+line-height精确控高 - 如果按钮放在
flex容器里，别忘了align-items: stretch可能拉伸高度，加align-self: flex-start更可控
最麻烦的从来不是代码写了多少行，而是你是否在 Safari 开发者工具里真·逐行检查过 computed 样式，而不是只信自己写的那几行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
