input button文字的行高在FF下的显示问题

近期，有开发者在国外发现Firefox和Opera浏览器存在一个特别的BUG。这个BUG关于按钮内文字的行高调整问题，涉及到input type=”submit”以及HTML的button标签。让我们以一个实例来解释这个问题。

设想你有一个按钮，并为其设置了如下样式：

```css

inputbutton {

border: 2px solid 06f;

color: 06f;

background-color: 6cf;

font: bold 12px Arial, Helvetica, sans-serif;

line-height: 50px;

}

```

按照通常的浏览器表现，这个样式应该为按钮设置50像素的行高，并使文本在按钮内垂直居中。在Chrome、Safari以及IE8等浏览器中，这个样式表现正常。但唯独在Firefox和Opera中，按钮的行高并没有按照设定的50像素显示，实际表现令人困惑。

那么，究竟是什么原因导致了这个问题呢？

在Firebug的帮助下，开发者发现了虽然他们已经把行高设定为50像素，但Firefox仍然坚持使用15像素的行高。开发者推测Firefox可能对按钮文本的行高有强制限制。为了验证这个猜想，他们编写了以下的CSS代码：

```css

button, input[type="reset"], input[type="button"], input[type="submit"] {

line-height:normal !important;

}

```

他们发现Firefox会擅自将按钮内文本的行高设置为“normal”，而这个值在Firefox中默认为15像素。令人头疼的是，各个浏览器对于“normal”这个值的定义并不统一。

最终，这位开发者放弃通过调整行高来撑开按钮并使文本居中的方法。他们采取了另一种样式设计，虽然这并不是最佳方案，但确实解决了Firefox的按钮行高问题。代码如下：

```css

inputbutton {

border: 2px solid 06f;

color: 06f;

background-color: 6cf;

font: bold 12px Arial, Helvetica, sans-serif;

padding: 18px 6px; / 通过增加内边距来间接调整按钮高度和文本位置。 /

}

```

尽管这并不是最优雅的解决方案，但至少达到了预期的效果。对于追求跨浏览器兼容性的开发者来说，这无疑是一个值得注意的BUG。