<button> 内浮动跨度的 Firefox 问题答案

【问题标题】：Firefox problems with floated span inside <button><button> 内浮动跨度的 Firefox 问题
【发布时间】：2013-11-27 22:23:49
【问题描述】：

我无法在 Chrome 和 FF 中制作一个带有跨度的 html5 按钮。在 FF 中查看下面的链接，然后在 Chrome 中查看。文本“登录”在 Chrome 中垂直居中，但在 FF 中文本更高。 FF 中无法通过按钮更改行高。

当我尝试在不使用 float 的情况下解决此问题时，会出现另一个问题，即 line-height 并在 span 中使用 font-size:30px。

查看问题here

哦，我不想使用图像..

【问题讨论】：

标签： css html

【解决方案1】：

您可以通过将button 中的文本包裹在span 中，然后在其中添加line-height 来解决此问题：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：