input button文字的行高在FF下的显示问题
2012-12-31 11:52
239 查看
最近国外有开发者发现Firefox和Opera的一个BUG:无法改变按钮里文字的行高(包括input type=”sumbit”和HTML的button标签)。举个例子,对一个按钮使用以下样式:
按照常理,这个样式将为按钮设置50px的行高,并使文本垂直居中。因为这个样式在Chrome、Safari和IE8里的表现都一致,唯独在Firefox和Opera里并没有表现出50px的行高,具体效果如下图。
是什么原因引起了这个问题?
在Firebug的帮助下,该开发人员发现虽然自己已经把行高设为50px,但Firefox依然使用15px的行高。
该开发人员认为是Firefox强行限制了按钮文本的行高,于是编写了以下的CSS用于验证。
该开发人员发现,Firefox会私自把按钮内文本的行高设置为normal,这个值在Firefox里默认为15px,但各个浏览器对normal的值并没有一个统一的标准。最后这个开发人员放弃了通过行高把按钮撑开并使文本居中的方法,而采用了以下的样式,解决了Firefox的按钮行高问题。
这并不是最好的办法,但也算是达到了所需的效果。
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; }
这并不是最好的办法,但也算是达到了所需的效果。
相关文章推荐
- drawableTop,button图片显示在文字上面,文字不显示的问题
- 关于button中设置文字不显示的问题
- 动态设置Button的透明度文字不显示问题
- 苹果手机上input的button按钮颜色显示问题
- Ubuntu下Firefox Flash文字乱码或不能显示的问题
- 修改html中button显示的文字
- (转)RadioButton左侧显示文字,右侧显示按钮时文字不靠边的问题解决
- 解决TabContainer选项卡文字显示不全的问题
- 去掉ios中html的input元素显示圆角问题
- 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法
- 关于FF 设置字体为font-weight:blod;时 字体显示过粗的问题
- echarts x轴文字显示不全问题
- js修改input的type属性问题(兼容所有浏览器,主要用于密码类的默认有提示文字的效果)
- 解决ubuntu下Firefox Flash文字乱码或不能显示的问题
- Button的背景使用selector图片无法显示的问题
- input、button、a标签 等定义的按钮尺寸的兼容性问题
- silverlight3文字显示,有黑有灰问题
- input两种默认显示文字方式
- MPAndroidChart项目实战(四)——柱状图实现及X轴文字不显示问题和柱状图上显示文字
- Python3 Tkinter基础 Button Label Frame 单击按钮,Label中显示的文字更换 StringVar textvariable