DDR爱好者之家

input button文字的行高在FF下的显示问题
站长资源 2024/11/25 佚名
8 1538
DDR爱好者之家 Design By 杰米
最近国外有开发者发现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的行高，具体效果如下图。 
input button文字的行高在FF下的显示问题 
是什么原因引起了这个问题？
在Firebug的帮助下，该开发人员发现虽然自己已经把行高设为50px，但Firefox依然使用15px的行高。
input button文字的行高在FF下的显示问题 
该开发人员认为是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;
}

这并不是最好的办法，但也算是达到了所需的效果。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米