html - span 不会在 Mozilla 中的按钮内保持垂直居中

Question

我正在尝试将其中的spanadisplay:block;居中button

它适用于 Chrome 和 IE9，但不适用于 Firefox

这是它的链接：http: //jsbin.com/adefom/5/edit

有人知道如何使这个跨度在 Firefox 中居中（垂直）吗？

Answer 1

只需删除硬编码的高度和宽度.btn并给它一些padding.

<button class='btn'>
  <div class='icon'></div>
</button>

按钮
{
  边距：0px；
  填充：0px；
}

/* Firefox 按钮填充修复 */
按钮::-moz-focus-inner
{
  边框：0；
  填充：0；
}

。图标
{
  背景颜色：黑色；
  宽度：17px；
  高度：17px；
}

.btn
{
  填充：4px；
}

Firefox 按钮填充修复来自此处。感谢@Rajesh 找到那个。

演示<-- 点击！