在Firefox中,button的宽度和高度与其他浏览器总有不同,本文将通过两个例子来解释造成这种差别的原因,并给出解决方法。
假设我们有这样一个最简单的按钮
<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以外,其他标签也有可能有这个元素。