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

奇怪的padding

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

  1. <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样式即可:

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

奇怪的宽度和高度

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

html

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

css

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

  1. button {
  2. padding: 0;
  3. width: 36px;
  4. height: 36px;
  5. border: 1px solid black;
  6. background-color: red;
  7. }
  8. button img {
  9. width: 100%;
  10. height: 100%;
  11. }

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

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

即:

  1. button::-moz-focus-inner {
  2. padding: 0;
  3. border: 0;
  4. }

总结

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