Firefox按钮默认padding视觉更大，因其UA样式为2px 6px并叠加保守行高与字体度量；需显式设置button{padding:8px 16px;}覆盖，禁用padding-inline/block。
Firefox button 默认 padding 为什么比 Chrome 大
Firefox 的 UA 样式对 button 设的是 padding: 2px 6px（或类似值），而 Chrome 通常是 6px 12px，但 Firefox 渲染时还叠加了更保守的行高和字体度量，导致视觉上“内边距更多”——尤其在小字号、紧凑布局中，文字看起来被“框得更满”。这不是 bug，是 Gecko 引擎对表单控件的默认保护逻辑。
用 padding 显式覆盖比依赖继承更可靠
别指望通配符重置或 * { padding: 0 } 能生效：Firefox 对 button 的 UA 样式优先级高，且部分版本会忽略继承来的 padding 值。必须单独写：
-
button { padding: 8px 16px; }—— 数值统一，避免左右/上下不一致 - 若需极致紧凑，用
padding: 4px 12px;，但必须同步检查line-height是否仍能包裹文字 - 禁用
padding-inline或padding-block—— Firefox 旧版（
为什么 box-sizing: border-box 单独写没用
Firefox 会把 button 当作“系统控件”特殊处理，box-sizing 声明在某些场景下（比如嵌套在 flex 容器里）会被静默忽略。真正起效的组合是：
button { box-sizing: border-box; padding: 0; border: 1px solid transparent; }-
border必须存在，否则 Firefox 可能恢复 UA 的inset边框并连带拉回默认内边距 -
line-height: 1.3;或具体像素值（如line-height: 20px;）——仅靠padding不足以控制文字垂直居中，Firefox 对normal的解析特别宽松
Firefox 专用修复：用 @supports 隔离样式
如果你的项目已放弃 IE8，但还要兼容 Firefox 90+，可以用特性检测精准干预：
@supports (padding: 1px) and (not (-webkit-appearance: none)) {
button {
padding: 6px 12px;
line-height: 1.4;
}
}
这个写法能绕过 Safari/Chrome 的前缀干扰，只对纯 Gecko 环境生效。注意：不要用 @supports selector(button:focus-visible) —— Firefox 对该伪类的支持从 84 版本才开始，且行为和 Chrome 不完全一致。
最常被忽略的一点：Firefox 的 button 内边距差异，本质不是“多写了 padding”，而是它拒绝把文字渲染进你定义的盒子里——你得用 padding + line-height + border 三者锁死空间，少一个，它就悄悄把 UA 样式加回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
