浮動跨度裏面的Firefox問題<button>

Question

我一直沒有能夠製作一個HTML5按鈕，其內部的跨度與Chrome和FF看起來很相似。請在FF中查看以下鏈接，然後在Chrome中查看。文本「登錄」以Chrome瀏覽器爲中心，但在FF中文本較高。線條高度不能在帶按鈕的FF中更改。

當我嘗試解決此問題而不使用浮動時，另一個問題會導致線寬變大，並且在跨度中使用font-size：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/`