Firefox按钮默认更“胖”且:focus时高度异常，因Gecko引擎内置更大padding、border及隐藏focus ring；需重置padding/border/margin、禁用::-moz-focusring、设box-sizing:border-box、显式line-height并避免依赖autoprefixer。
Firefox按钮默认样式比Chrome更“胖”
Firefox对 button 元素内置了更大的默认 padding 和额外的 border（尤其是 outline 和 :-moz-focusring 伪类），导致同样写 padding: 8px 12px，在 Firefox 下实际高度常多出 2–4px。这不是 bug，是 Gecko 渲染引擎的默认行为。
实操建议：
- 重置所有按钮相关边距：给
button显式声明padding、border、margin，不要依赖浏览器默认值 - 禁用 Firefox 特有聚焦轮廓：添加
button::-moz-focusring { outline: none; } - 统一盒模型：强制使用
box-sizing: border-box，避免border溢出尺寸预期
button:focus 在Firefox中会触发额外内边距
Firefox 的 :focus 状态会悄悄叠加一层系统级 focus ring（尤其在键盘导航时），它不走 outline，而是通过内部渲染层“撑开”内容区，视觉上像多了点 padding。你查 computed styles 看不到它，但高度确实变了。
实操建议：
- 用
button:focus { outline: none; }关掉默认 focus ring（需配合可访问性替代方案） - 若必须保留焦点提示，改用
box-shadow模拟：例如box-shadow: 0 0 0 2px #007bff;，它不影响布局尺寸 - 测试时务必用 Tab 键手动触发
:focus，别只靠鼠标 hover 或点击后检查
font-size + line-height 不一致导致 Firefox 按钮文字居中偏移
Firefox 对 button 内部行内盒子的垂直对齐逻辑和 Chrome 不同：当 line-height 小于元素高度时，Firefox 更倾向把文字“坐底”，而 Chrome 倾向居中——尤其在设置了 padding 但没设 line-height 时特别明显。
实操建议：
- 显式设置
line-height，且值等于按钮高度减去上下padding（例如height: 36px; padding: 8px 12px;→line-height: 20px;） - 避免只靠
padding控制高度，改用min-height+line-height组合，更可控 - 禁用
vertical-align（默认是baseline）：加vertical-align: middle;防止父容器内联排版干扰
autoprefixer 无法修复 Firefox 按钮渲染差异
autoprefixer 只补全 CSS 属性前缀，它不处理浏览器引擎级的默认样式差异。你写了 -moz-appearance: none;，它不会自动帮你抹掉 Firefox 的 button 内置 padding 或重写 ::-moz-focusring。
实操建议：
-
-moz-appearance: none;必须手动加，并配合border和background重置，否则可能留白边或背景色异常 - 用
@supports (-moz-appearance: none)做特性检测，只为 Firefox 加载针对性修复规则 - 真机或 Firefox DevTools 的 Layout 面板里勾选 “Show all boxes”，才能看清它到底多画了哪几像素
最麻烦的不是写多少 CSS，而是 Firefox 的按钮样式差异藏在渲染层里，不触发 focus、不换字体、不调 line-height，你都可能发现不了——直到上线后用户说“这个按钮点起来怪怪的”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
