必须显式重置button的padding、border、line-height和box-sizing四属性——因各浏览器ua样式表对button的padding采用互不兼容的硬编码值（如chrome为6px 12px、firefox为4px 8px），且这些值不继承、不可被*重置或normalize.css覆盖，须四者同步声明于基础css开头。
因为各浏览器的 UA 样式表对 button 的 padding 使用了完全不同的硬编码值，且这些值不继承、不可覆盖、优先级高于通配符重置。
Chrome/Firefox/Safari 的默认 padding 值根本不同
你看到的“默认内边距”，90% 来自浏览器内置的 UA 样式表，不是 CSS 规则。它们互不兼容：
- Chrome 默认
padding: 6px 12px - Firefox 是
padding: 4px 8px - Safari iOS WebView 还会因字体度量差异额外加空隙，开发者工具里显示的 computed 值常是 UA + 字体引擎叠加结果
- IE6–7 根本不用 CSS 定义 padding，而是渲染引擎硬编码，
padding: 0在那里基本无效
为什么 * { padding: 0 } 和 normalize.css 都不管用
normalize.css 明确跳过 button 的 padding 重置——这不是遗漏，是设计选择：它想保留“合理默认”，但 button 的“合理默认”恰恰就是最混乱的部分。而通配符重置在 Safari 15+ 和部分 Android WebView 中对 button 完全失效，这些环境会强制使用 UA 的 content-box 解析逻辑，直接忽略继承来的 padding 值。
必须显式写死 padding，并配合其他三项锁定
只改 padding 不够，必须和 border、line-height、box-sizing 四者同步声明，否则某一项缺失就会在特定浏览器中引发连锁错位：
- 用
padding: 8px 16px（推荐 px，避开 em/rem 在 UA 字体链中的不稳定计算） - 配
border: 1px solid transparent：绕过 Firefox 的inset边框撑开、IE6–7 的无色占位逻辑 - 加
line-height: 20px（IE6–8 补line-height: normal）：配合 padding 控制文字垂直居中 - 强制
box-sizing: border-box：Safari 和旧 WebView 必须显式声明，继承无效
Flex 布局下 padding 差异会触发 Safari 的 min-width 保护
当 button 在 Flex 容器中设了 flex: 1 0 0，而 padding 又没统一，Safari 会基于 UA 的“自然宽度”（含未归零的 padding）触发 min-width: min-content，导致按钮突然撑满容器或溢出。修复方式不是调 flex 属性，而是先 fix padding，再加 min-width: 0 关掉这个保护机制。
真正起效的从来不是单点样式，而是这四条规则必须同时出现在项目基础 CSS 最开头，早于所有组件样式，且不能用 input[type="button"] 替代——它的 UA 行为和原生 button 不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
