Firefox Input Button Line-Height Bug
发布时间：2018-10-02 15:50:02 所属栏目：运营 来源：站长网
导读：最近国外有开发者发现 Firefox 和 Opera 的一个BUG：无法改变按钮里文字的行高（包括input type=sumbit和HTML的button标签）。举个例子，对一个按钮使用以下样式： input#button { border: 2px solid #06f; color: #06f; background-color: #6cf; font: bo
|
最近国外有开发者发现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用于验证。 ibutton, 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; } 这并不是最好的办法，但也算是达到了所需的效果。 本文案例出自The Firefox Input Button Line-Height Bug 后记我认为这个开发人员似乎并没有考虑到令一个CSS属性，而是抱着“完成了就好”的心态去解决问题。你认为这个所谓的BUG有更好的办法解决吗？欢迎讨论一下。 本文链接: http://blog.imbolo.com/firefox-input-button-line-height-bug/ （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
