必须显式声明 button { box-sizing: border-box; }，否则 Safari、iOS WebView 和旧版 Android WebView 会按 content-box 解析尺寸；通配符 * { box-sizing: border-box; } 对 button 无效，因其被 UA 视为系统控件不走继承链；IE8 及更早版本不支持或不稳定；padding 差异是高度不一致主因，需显式设 padding、min-width: 0（iOS 需 min-width: 1px）及 line-height 等组合修复。
必须显式声明 button { box-sizing: border-box; }，否则 Safari、iOS WebView 和旧版 Android WebView 会按 content-box 解析尺寸，导致按钮宽高错乱——这不是 bug，是 UA 样式硬编码行为。
为什么 * { box-sizing: border-box; } 对 button 无效
通配符重置在 Chrome/Firefox 中看似生效，但在 Safari 15+、iOS WebView 和部分 Android 4.4 WebView 中会被跳过：这些环境把 button 当作系统控件特殊处理，box-sizing 不走 CSS 继承链。你写的 * { box-sizing: border-box; } 实际没覆盖到 button 元素本身。
更隐蔽的是 IE8 及更早版本：IE6–7 完全不识别 box-sizing；IE8 仅在标准模式下部分支持，且对 button 的计算极不稳定——写了也等于没写。
所以必须单独写：
立即学习“前端免费学习笔记（深入）”；
button {
box-sizing: border-box;
}不能省略选择器，也不能用 input[type="button"] 替代——两者 UA 样式完全不同。
padding 不统一才是高度不一致的主因
按钮“一个高一个矮”，90% 是因为各浏览器默认 padding 值差异巨大：
- Chrome 默认
padding: 6px 12px - Firefox 是
padding: 4px 8px - IE6–7 甚至用硬编码值（非 CSS 可查）
- Safari iOS WebView 还会因字体度量额外加空隙
通配符 * { padding: 0; } 或 normalize.css 都无法可靠覆盖——UA 样式对 button 有超高优先级。
实操建议：
- 统一写死
padding: 8px 16px;或padding: 10px 20px;，避免用em/rem（font-size继承链不稳定） - 若需彻底归零，用
padding: 0;，但必须同步设border: 1px solid transparent;和显式line-height，否则文字贴边或溢出 - 禁用
height: 36px这类硬设；改用min-height: 36px;+padding+line-height组合控制垂直居中
Flex 布局下按钮突然撑满容器？检查 min-width
当 button 在 Flex 容器中用了 flex: 1 0 0;，而它的 box-sizing 仍是 content-box，Safari 会触发隐式 min-width: min-content 保护机制——按钮不再从 0 开始拉伸，而是按“含默认 padding/border 的自然宽度”计算，结果撑开父容器或换行。
修复方式只有两个必须同时存在：
button { box-sizing: border-box; }-
button { min-width: 0; }（iOS Safari 需要min-width: 1px;才能关闭保护）
只写 flex: 1 或只写 min-width: 0 都不够；flex: 1 0 0 本身也不足以绕过该机制。
旧 IE（IE6–8）根本没法靠 box-sizing 解决
IE6–7 完全不支持 box-sizing，任何前缀或变体都无效。你写的 width: 100px; padding: 6px; border: 1px;，它仍按 content-box 算总宽 = 100px + 12px + 2px。
真要兼容，得放弃单属性思路，改用组合控制：
-
padding: 0;+border: 1px solid transparent;（防止 IE7/8 把无色边框当占位符） -
height: auto;+line-height: 1.4;（IE6–8 必须显式设line-height，否则文字贴顶） -
display: inline-block;+zoom: 1;（触发 hasLayout，防边框浮动）
现代项目若已放弃 IE8，可放心用 gap 控制按钮组间距，但它解决不了单个 button 内部的 padding 差异——那是 UA 样式硬编码问题，不是布局问题。
