在<button> </button>中浮动跨度的Firefox问题

Question

我无法制作一个html5按钮，其内部的跨度在Chrome和FF中看起来很相似。请参阅FF中的以下链接，然后在Chrome中。文本“登录”在Chrome中以verticaly为中心，但在FF中文本较高。使用按钮不能在FF中更改行高。

当我尝试在不使用浮点数的情况下解决此问题时，另一个问题就是行高并使用字体大小：跨度为30px。

查看问题here

哦，我不想使用图片..

Answer 1

Firefox问题是：Revisiting the Firefox button line-height bug... any 2011 solutions?

您可以通过将button内的文字包裹在span中，然后将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>

Answer 2

我找到了解决这个问题的方法。这是解决方案。

    `http://jsfiddle.net/Uysbm/`