必须显式重置 button 的 padding、border 和 line-height，因各浏览器默认值差异大且 UA 样式优先级高；normalize.css 不重置这三项，需在项目开头手动统一设置三者并声明 box-sizing。
必须显式重置 button 的 padding、border 和 line-height，仅靠 * { padding: 0 } 或 normalize.css 不足以抹平差异。
button 的默认 padding 在各浏览器中根本不同
Chrome 默认 padding: 6px 12px，Firefox 是 4px 8px，IE6–7 甚至用硬编码值（非 CSS 可查），Safari iOS WebView 还会因字体度量差异额外加空隙。通配符重置和继承来的 padding 基本无效——UA 样式表对 button 有强优先级。
实操建议：
- 直接写死
button { padding: 8px 16px; }，数值按设计稿基准定，避免使用em或rem（因 font-size 继承链不稳定） - 若需彻底归零，用
padding: 0;，但必须同步控制border和line-height，否则文字会贴边或溢出 - 不要依赖
input[type="button"]替代 —— 它的 UA padding 和 focus 样式与原生button不同，调试时容易误判
border 和 line-height 必须同步约束
button 的 border 类型（inset/solid）、颜色、粗细，以及 line-height 与 font-size 的关系，在各浏览器中独立渲染，box-sizing 对它们完全无影响。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 统一用
border: 1px solid transparent;—— 避免 Firefox 的inset边框撑开尺寸，也绕过 IE6–7 对无色边框的占位逻辑 - 禁用
height硬设；改用min-height: 36px;+padding: 8px 16px;+line-height: 20px;，确保文字垂直居中稳定 - IE6–8 必须补
line-height: normal;或显式line-height: 1.4;，否则文字会顶到上沿
为什么 normalize.css 仍需手动覆盖 button 样式
normalize.css 确实重置了 button 的 margin 和字体继承，但它**不重置 padding/border/line-height** —— 这是刻意为之：保留“合理默认”而非“强制归零”。而 button 的“合理默认”恰恰就是跨浏览器最不一致的部分。
实操建议：
- 在项目基础 CSS 开头（早于所有组件样式）加一段独立
button重置规则，不依赖框架内置样式 - 若用 Flex 布局且设了
flex: 1 0 0，padding不一致会导致min-width在 Safari 中被忽略，按钮意外撑宽 —— 此时必须先 fix padding - 检查开发者工具的“Computed”面板，确认最终生效的
padding值是否来自你的规则，而非 UA 或框架
真正让 button 视觉一致的，从来不是单点修复，而是 padding、border、line-height 三者锁定+box-sizing 显式声明的组合动作。漏掉任意一项，都可能在某个浏览器里突然偏移几像素——这种问题往往只在上线后被用户截图反馈，而不是开发时能一眼看出。
