CSS网页制作 表单button的行高问题
发布时间：2012-03-31 23:24:47 作者：佚名 
我要评论
我要评论昨天下午为之给我发了一个有关于button的line-height问题的文章——《The Firefox Input Button Line-Height Bug》。看后明白了许多，顺便整理了一下，与大家一起知道这个问题
表单button的行高问题
下面我们先来看一个Demo的实例：
HTML Code
<input type="submit" id="button" value="engage"/>
CSS Code
#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
line-height: 50px;
}
浏览器下的截图：
要回答这个问题，我回答不出来，可能您知道是为什么？我只能把他当作是Firefox和Opera浏览器下的一个特点，换句话就是：这两个浏览器的line-height默认值为normal并且还加了一个“!important”,类似于：
button, input[type="reset"], input[type="button"], input[type="submit"] {
line-height:normal !important;
}
那我们是不是可以在设置值的时候也加个“!important”解决呢？我尝试了，可是失败了，那我们需要怎么来解决呢？
如何解决？
#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
padding: 18px 6px;
}
下面我们先来看一个Demo的实例：
HTML Code
复制代码
代码如下:<input type="submit" id="button" value="engage"/>
CSS Code
复制代码
代码如下:#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
line-height: 50px;
}
浏览器下的截图：
要回答这个问题，我回答不出来，可能您知道是为什么？我只能把他当作是Firefox和Opera浏览器下的一个特点，换句话就是：这两个浏览器的line-height默认值为normal并且还加了一个“!important”,类似于：
复制代码
代码如下:button, input[type="reset"], input[type="button"], input[type="submit"] {
line-height:normal !important;
}
那我们是不是可以在设置值的时候也加个“!important”解决呢？我尝试了，可是失败了，那我们需要怎么来解决呢？
如何解决？
Rob Glazebrook在他的《The Firefox Input Button Line-Height Bug》教程中使用了一种方法——在button中不重置line-height的值，而是使用padding来制作相同的效果。这样上面的实例可以这样修改：
复制代码
代码如下:#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
padding: 18px 6px;
}
这种办法让文本处在button的中心位置，虽然不是很理想，但我们又无法使用line-height来让他在中心点位置，不知道您有没有更好的方法。如果有的话，记得与我们一起分享。欢迎随时在评论中留言。
这个有关于button的line-height的bug不知道你以前留意了没，我是没有发现到，这次可算是学习了一下，那么最后在结束之前，我们一起感谢为之提供的技术链接，如果你还不太清楚我说的，而且你又对这个bug很感兴趣的话，你可以移步到Rob Glazebrook的《The Firefox Input Button Line-Height Bug》。希望对大家有所帮助。
相关文章
这周了解到一个新的名词，同态,同态可以理解成一种特殊形态吧，这篇文章主要为大家详细介绍了如何使用CSS实现这种同态效果，文中的示例代码讲解详细，感兴趣的小伙伴可以了2024-03-25
这篇文章主要为大家详细介绍了如何使用 css3 模拟一个渐变式圆点加载效果，文中的示例代码讲解详细，具有一定的借鉴价值，有需要的小伙伴可以跟随小编一起学习一下2024-03-22
想要给一个展示图片的区域底部加一个该图片的放大后的背景，并模糊 20，并增加一个黑色 0.6 透明度的遮罩，这篇文章主要介绍了CSS如何设置背景模糊周边有白色光晕(解决方案2024-03-20
CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中,这篇文章主要为大家整理了常用的7种方法，感兴趣的小伙伴可以跟随小编2024-03-19
style属性可以用在HTML中大部分的标签上，本文主要介绍了CSS设置style属性的3种方法，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2024-03-15
在CSS中隐藏元素有多种方法，这篇文章主要为大家整理了五种常见方法及其适用场景与区别，文中的示例代码讲解详细，具有一定的借鉴价值，有需要的小伙伴可以跟随小编一起学2024-03-15
三栏布局是常见的一种页面布局方式，将页面分为左栏、中栏和右栏，这篇文中主要为大家详细介绍了CSS实现三栏布局的四种方法，文中的示例代码讲解详细，感兴趣的小伙伴可以2024-03-11
这篇文章主要为大家详细介绍了如何使用CSS实现简单的翻页效果，文中的示例代码讲解详细，具有一定的借鉴价值，有需要的小伙伴可以跟随小编一起学习一下2024-03-06- 在网页设计中，视差滚动效果可以为用户带来沉浸式的浏览体验,这篇文章主要为大家详细介绍了如何使用CSS完成视差滚动效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随2024-02-28
粘性定位的元素是依赖于用户的滚动，在position:relative与position:fixed定位之间切换，这篇文章给大家介绍css中position:sticky 粘性定位的相关知识，感兴趣的朋友跟随小2024-02-28
最新评论