input button文本的行高在FF下的显示信息难题

日期:2020-12-13 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

近期海外有开发设计者发现Firefox和Opera的1个BUG:没法更改按钮里文本的行高(包含input type=”sumbit”和HTML的button标识)。举个事例,对1个按钮应用下列款式:

拷贝编码
编码以下:

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里的主要表现都1致,唯有在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的值并沒有1个统1的规范。最终这个开发设计人员舍弃了根据行高把按钮撑开并使文字垂直居中的方式,而选用了下列的款式,处理了Firefox的按钮行高难题。

拷贝编码
编码以下:

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

这其实不是最好是的方法,但也算是做到了所需的实际效果。