span不会在mozilla中的按钮内垂直居中

Question

我正在尝试将span置于display:block;

内button

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

以下是指向它的链接： http://jsbin.com/adefom/5/edit

有谁知道如何在firefox中使这个跨度居中（垂直）？

Answer 1

只需移除.btn上的硬编码高度和宽度，然后将其设为padding。

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

button
{
  margin: 0px;
  padding: 0px;
}

/* Firefox button padding fix */
button::-moz-focus-inner
{
  border: 0;
  padding: 0;
}

.icon
{
  background-color: black;
  width: 17px;
  height: 17px;
}

.btn
{
  padding: 4px;
}

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

Demo＆lt; - 点击！