如何使用 css 输入类型按钮和按钮引导程序修复 firefox 不同行高的错误答案

【问题标题】：how fix bug with firefox different line-height with css input type button and a button bootstrap如何使用 css 输入类型按钮和按钮引导程序修复 firefox 不同行高的错误
【发布时间】：2015-10-06 17:28:12
【问题描述】：

firefox v. 27.0.1 在输入类型“按钮”中的错误 line-height 为 17px，但在 css line-height:20px 中！important;看图

请帮帮我

【问题讨论】：

这不是错误，行高应该对替换元素的内容没有影响。实际上，如果 Chrome 尊重在 input[type=button] 上指定的 line-heights，那么 Chrome 就有一个错误。请参阅替换元素 (1,2) 和 line-height 文档。

标签： css twitter-bootstrap firefox

【解决方案1】：

好吧，您可以将input 替换为button，这样行高就可以了。

所以，不要使用

<input type="button" value="Relate and publish" />

但使用

<button type="button">Relate and publish</button>

相反。见http://jsfiddle.net/XHw4L/4/

或者，如果您根本无法更改 HTML，您可以显式更改输入的高度以匹配按钮的高度。在本例中，28px 可以解决问题，但如果在别处定义了其他样式，您可能需要稍作调整。

见updated fiddle。

【讨论】：

此链接由 wiget bootstrap 在 yii 框架中生成，这是我的问题行高！示例输入类型：按钮 [source w3school] (w3schools.com/tags/att_input_type.asp)
你的意思是你不能改变HTML？你的问题没有提到这一点；请在以后的问题中记下类似的限制。我现在添加了一个只有 cSS 更改的解决方案；怎么样？