如何修复CSS按钮在不同浏览器下尺寸不统一？-css教程-PHP中文网

必须显式声明 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 等组合修复。

如何修复css按钮在不同浏览器下尺寸不统一？

必须显式声明 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 有超高优先级。

实操建议：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

统一写死 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 的自然宽度”计算，结果撑开父容器或换行。

修复方式只有两个必须同时存在：