css - 内 float 跨度的 Firefox 问题

Question

我无法使内部带有 span 的 html5 按钮在 Chrome 和 FF 中看起来相似。在 FF 中查看下面的链接，然后在 Chrome 中查看。 “登录”文本在 Chrome 中垂直居中，但在 FF 中文本更高。在 FF 中无法使用按钮更改行高。

当我尝试在不使用 float 的情况下解决此问题时，行高和跨度中使用 font-size:30px 会出现另一个问题。

查看问题here

哦，我不想使用图像..

Answer 1

Firefox 问题是这样的:Revisiting the Firefox button line-height bug... any 2011 solutions?

您可以通过将文本包装在 span 中的 button 内，并向其添加 line-height 来解决此问题:

<button><span>LOGIN</span><span class="a">›</span></button>

button span:first-child {
    line-height:35px;
}

参见: http://jsbin.com/afezem/2

或者，您可能更愿意稍微滥用 b 元素:http://jsbin.com/afezem/4

<button><b>LOGIN</b><span>›</span></button>