input button的行高在FF下的显示问题
来源:互联网 发布:java 计算二叉树深度 编辑:程序博客网 时间:2024/05/19 18:10
最近国外有开发者发现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;
}
这并不是最好的办法,但也算是达到了所需的效果。
本文案例出自The Firefox Input Button Line-Height Bug
- input button的行高在FF下的显示问题
- 苹果手机上input的button按钮颜色显示问题
- ff的居中显示问题
- input, select 的宽与高怎么兼容IE、FF
- 解决在高版本浏览器下的input type="file"的路径问题
- input和textarea在IE和FF下的统一高度设置
- 关于在IE-8下 button的背景图片不能正确显示的问题
- 给Button按钮设置背景图片在IE下不能正确显示的问题
- 简单的XSL在FF下无法显示的原因和解决办法。
- input标签和button放在一行写:inline元素的空白间隙问题
- 关于cookie在ie8中无法使用在FF下可用的问题
- button在Firefox下点击提交表单(form)的问题
- Button背景图片在IE下不显示问题
- CSS属性line-height行高在IE6+ FF 谷歌 苹果 上的解决方案
- 验证码在ie7和FF下无法刷新的问题
- JS在IE和FF下不兼容的问题及部分解决办法
- HTML: button和input button的区别
- HTML: button和input button的区别
- windows搭建android开发环境
- phoneGap API调用摄像头并上传图片
- 秋雨寄相思
- jquerymobile 动态加载表单内容后怎么重新渲染?
- public static Bitmap createScaledBitmap(
- input button的行高在FF下的显示问题
- tomcat知识点
- mysql优化之使用索引
- VLC doc
- C++之运算符重载(2)
- word add-in 卸载时如何清除自定义的按钮和菜单
- 初步了解Statement和PreparedStatement之间的区别
- ubuntu安装jdk,ubuntu设置java环境变量,ubuntu安装jdk,ubuntu设置java环境变量,ubuntu安装 jdk,ubuntu设置java环境变量
- 入静和入世