在Firefox中，button的宽度和高度与其他浏览器总有不同，本文将通过两个例子来解释造成这种差别的原因，并给出解决方法。

奇怪的padding

假设我们有这样一个最简单的按钮

<button style="padding: 0;">button</button>

则在Chrome和Firefox中显示效果分别为：

可以很明显地看到，Firefox中button的padding并不是我们所设定的0。在网上搜到答案，Firefox中有一个特殊的元素::-moz-focus-inner。简单来说，这个区域是位于button的padding和content之间的区域：

Firefox中对::moz-focus-inner的默认样式造成了button的宽度和高度与其他浏览器中的不同。解决方法很简单，编写该区域的CSS样式即可：

button::moz-focus-inner { padding: 0; }

奇怪的宽度和高度

假设我们有一个图片按钮，我们想让图片占满按钮的宽度和高度。

html

<button><img src="..."/></button>

css

为了方便查看效果，给button设定了border和background-color

button {
  padding: 0;
  width: 36px;
  height: 36px;
  border: 1px solid black;
  background-color: red;
}
button img {
  width: 100%;
  height: 100%;
}

然后在Chrome和Firefox里效果分别为：

可以看到，Chrome中完全符合我们的预期，而Firefox中图片并没有占满按钮，在按钮的边框和图片之间有一些区域（显示的红色为button的背景）。对，没错，这个红色区域也是我们前面提到的::moz-focus-inner。为了解决这个问题，我们依然可以对其设置CSS样式。注意，仅仅设置padding并不能完全解决问题，还需设置border。具体差别请看下图对比：

即：

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

总结

再遇到类似问题时，首先想到这个特殊的元素::moz-focus-inner。另外，除了button以外，其他标签也有可能有这个元素。