火狐问题与浮动跨度内部<button>

Question

我无法在Chrome和FF中制作一个内部有跨度的html5按钮。请在FF中查看下面的链接，然后在Chrome中查看。文本"登录"在Chrome中垂直居中，但在FF中文本更高。线的高度不能用按钮在FF中改变。

当我试图在不使用float的情况下解决这个问题时，另一个问题是行高和跨度中使用字体大小：30px。

在这里查看问题

哦，我不想用图片。。

Answer 1

Firefox的问题是：重新访问Firefox按钮行高错误。。。有2011年的解决方案吗？

您可以通过将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/`