热搜：编程 Python Microsoft 编程语言 C++

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

发布时间：2023-03-03 04:25:58 来源：互联网

.

这是一篇很有收藏价值的文章《input button文字的行高在FF下的显示问题》，在开发过程对大家很有帮助，小编结合实例代码给大家介绍的非常详细，需要的朋友可以参考下

最近国外有开发者发现Firefox和Opera的一个BUG：无法改变按钮里文字的行高（包括input type=”sumbit”和HTML的button标签）。举个例子，对一个按钮使用以下样式：

复制代码

代码如下:

input#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
line-height: 50px;
}

按照常理，这个样式将为按钮设置50px的行高，并使文本垂直居中。因为这个样式在Chrome、Safari和IE8里的表现都一致，唯独在Firefox和Opera里并没有表现出50px的行高，具体效果如下图。

是什么原因引起了这个问题？
在Firebug的帮助下，该开发人员发现虽然自己已经把行高设为50px，但Firefox依然使用15px的行高。

该开发人员认为是Firefox强行限制了按钮文本的行高，于是编写了以下的CSS用于验证。

复制代码

代码如下:

button, input[type="reset"], input[type="button"], input[type="submit"] {
line-height:normal !important;
}

该开发人员发现，Firefox会私自把按钮内文本的行高设置为normal，这个值在Firefox里默认为15px，但各个浏览器对normal的值并没有一个统一的标准。最后这个开发人员放弃了通过行高把按钮撑开并使文本居中的方法，而采用了以下的样式，解决了Firefox的按钮行高问题。

复制代码

代码如下:

input#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
padding: 18px 6px;
}

这并不是最好的办法，但也算是达到了所需的效果。

本文input button文字的行高在FF下的显示问题到此结束。不下水，一辈子不会游泳；不扬帆，一辈子不会撑船。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:

标签： input button