必须显式重置button的padding、border、line-height和box-sizing，因normalize.css刻意跳过这四项，通配符重置在safari等浏览器中对button无效，各浏览器ua样式默认值差异巨大且不可继承。
必须显式重置 button 的 padding、border、line-height 和 box-sizing，缺一不可——normalize.css 不管这四项，通配符重置也基本无效。
为什么 normalize.css 加了还是不一致
normalize.css 确实修复了 button 的字体继承、margin 和部分 vertical-align，但它**刻意跳过 padding、border、line-height 和 box-sizing**。这不是遗漏，是设计选择：它想保留“合理默认”，但 button 的“合理默认”恰恰就是跨浏览器最混乱的部分。
- Chrome 默认
padding: 6px 12px，Firefox 是4px 8px，IE6–7 用硬编码值（CSS 查不到） - Safari iOS WebView 会因字体度量差异额外加空隙，且忽略
* { box-sizing: border-box }继承 - 开发者工具里看到的“Computed”值，90% 来自 UA 样式表，不是你写的规则
必须写死的四条 CSS 规则
这四条要放在项目基础 CSS 最开头，早于所有组件样式，且不能用 input[type="button"] 替代——它的 UA 行为和原生 button 不同。
-
button { box-sizing: border-box; }：Safari 和旧 WebView 必须显式声明，继承无效 -
button { padding: 8px 16px; }：推荐用 px，避开 em/rem 在 UA 字体链中的不稳定计算 -
button { border: 1px solid transparent; }：绕过 Firefox 的inset边框撑开、IE6–7 的无色占位逻辑 -
button { line-height: 20px; }：配合padding控制文字垂直居中；IE6–8 需补line-height: normal;或1.4
用 appearance: none 时容易漏掉的关键点
appearance: none 只是交出外观控制权，不清理已有视觉属性。漏掉任意一项，按钮就会在某个浏览器里突然凸起或错位。
- 必须同步写
border: none，否则 Safari 仍显示灰色细边 - 必须写
background: transparent，否则 Firefox 保留浅灰背景 - 必须重设
padding和margin，各浏览器默认值差得离谱 - 建议加
line-height: 1，避免 Safari 中文字上下留白异常
Flex 布局下按钮意外撑宽的隐藏原因
如果 button 在 Flex 容器中用了 flex: 1 0 0，而 box-sizing 没显式声明，Safari 会触发 min-width: min-content 保护机制，按钮宽度失控。
- 错误表现：
button在 Safari 下突然变宽、溢出父容器，Chrome/Firefox 正常 - 修复方式：
button { box-sizing: border-box; min-width: 0; } - 别依赖 Autoprefixer 自动加前缀——它默认不处理
appearance，需手动配置插件
真正让 button 视觉一致的，从来不是单点修复，而是 padding、border、line-height、box-sizing 四者锁定的组合动作。哪怕只漏掉 line-height，IE8 下文字就可能顶到上沿；只漏 border，Firefox 就会多出一块 inset 阴影。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
