input 按钮在IE下显现不一致的兼容问题
作者：佚名
字体：[ ] 来源：互联网 时间：12-24 11:00:45
这段时间在处理网页默认的input 按钮时，IE下常显现不一致的宽度问题，让人感到很纠结,今天抽时间整理了一些，贴出来和大家分享下，希望对你们有帮助
这段时间在处理网页默认的input 按钮时，IE下常显现不一致的宽度问题，让人感到很纠结。所以今天请教了几位高手把这个问题解决了，现在贴出来和大家共享一下，当然这个方法在网上曾有人写过，大家可以一起来相互探讨一下。
Html Code: 代码如下:&input type="submit&; class="form-submit" value="subscribe" name="op" id="edit-submit" / &我先在这里贴出一段初始的CSS样式
CSS Code: 代码如下: input.form-submit {
border-radius: 3//FF下的实现圆角
-webkit-border-radius: 3//Safari,Chrome下实现圆角
border: 1px solid #469021;
background: #64A246;
font:bold 11px arial,sans-
padding: 0.25em 0.5
text-transform: }我看先来看看效果图吧：
从上图中我们明显可以看出，只有在Firefox下显示才是正常，在IE7和IE下没有圆角效果，这个都是众所周知，但IE7具有一个致命的问题，就是宽度变长了，大家一定会感到奇怪，我们没有定宽度的呀，怎么会这样呢？呆会我们会引用别人的说法了说明这个问题；另外就是Safari和Chrome下高度怎么也不行的呀。
就是因为这样的问题，我纠结了一个下午，但在高人的指点下，还是找到了相关的解决办法，现在我们一起来看看高人是如何解决这样的兼容问题。在IE7下会随着文字的增加导致文本距离按钮左右两侧的间距越来越大，这样就导致了上图中所看到的效果，但该问题存在于IE6/IE7，FF、IE8以及Opera 10没发现类似问题。对于另一情况，小生至今还没有弄明白为什么在Safari和Chrome下会出现高度问题，还希望各位前辈和高手指点。
针对前面的Bug，我对我的CSS稍加做了修改，如下：代码如下: input.form-submit {
-webkit-border-radius: 3
border-radius: 3
border: 1px solid #469021;
background: #64A246;
font:bold 11px arial,sans-
padding: 0.25em 0.5
text-transform:
height: 27
line-height: 19
margin: 0;
*width: 1; } 也就是我在以前的基础上增加了以下几行代码代码如下: input.form-submit {
height: 27//设置行高是为了解决Safari和Chrome下的高度问题
line-height: 19//让文字居中显示
margin: 0;
overflow://只有设置这个属性IE下padding才能生效
width://现代浏览器下识别
*width: 1;//IE7和IE6识别，设置值为1,我也不知道有何作用，但有些人此处设置值为0 } 这样我们就把那个头痛的问题解决了，大家可以一起看看修改后的效果：
这里提醒大家，对于字居中的问题，不仅受行高影响，而且还受其字体，字号的影响，大家感兴趣的可以尝试一下。
大家感兴趣的内容
12345678910
最近更新的内容1439人阅读
学习心得（60）
最近发现input标签是总不能获得跨浏览器的统一样式。主要的问题有这么两个：一是input标签的高度不能统一，各浏览器不兼容，Firefox和IE中的高度始终不能一致；二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示，而是靠输入框的左上角显示。
为了彻底解决搜索框的这些问题，我以GreenGaint主题搜索框的样式为准，重写了一遍代码并且以像素为单位测量了一下在没有任何样式表的情况下＜input&标签在默认浏览器中的实际差别。
结果发现：input标签在type为text时，在Firefox和Safari中的默认高度为22像素（包括上下边框）宽度为146像素（包括左右边框），而在IE中的默认高度为24像素，而宽度却和Firefox和Safari是一致的，也是146像素。当 input标签在type为submit时，在Firefox中的高度为23像素（包括阴影），宽度为75像素。在Safari中高度为21像素，宽度为73像素，在IE中高度为为25像素、宽度为73像素。
那么在样式化input标签时又该注意哪些问题呢？先来看下面经过样式化后，在不同浏览器中都有着良好表现的搜索框。
总结一下，在给input标签写CSS时需要注意的有以下几点：
一、不要给属性为text的input标签设置高度，这样无法让IE浏览器下输入框中的文字垂直居中显示。尽管你后来想要通过设置padding属性来让文字居中，你会发现根本没法让它在Firefox和IE中取得一致的效果。正确的做法是直接给input标签设置padding属性，通过内边距属性来调节input标签的高度，而且这时IE中的文字也是居中显示的。
二、input标签不会继承父元素的字体样式和大小，需要直接给input标签声明font-family和font-size属性。
三、给属性为text的input标签设置合适的width属性和padding属性，确保其中的文字在合适的范围内出现。尤其是使用了背景图片后，要让文字框的大小和背景图片的大小相当，这样看上去更加美观。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：39833次
排名：千里之外
原创：35篇
转载：29篇
(4)(2)(1)(5)(1)(33)(14)(4)当&input&的输入框有个较高的高度时，如何使&input&的输入框内容在火狐浏览器实现垂直居中 一般过高的文本框，字是在文本框内靠顶边对齐的。用了line-height之后可以实现在ie6/ie7下的输入内容垂直居中，但在firefox下没用，请问可否用css令其在firefox下垂直居中对齐？？代码如下：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &;&&html xmlns=&;&&head&&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&&title&无标题文档&/title&&/head&&body&&input style=&border:1px solid #999; padding:0; margin:0; height:38 line-height:38& type=&text&/&&/body&&/html&
&input style=&font-size:12border:1px solid #999; padding:10px 3 margin:0; height:12line-height:12& type=&text&/$>$ 用测试ie6/7/FF下高度都是34注明：因ie和FF的光标高度不同，所以必须设置line-否则ie中的padding-bottom会少2px，被光标占距;又因字号为12px,但是实际只占11所以在ie中padding-bottom会多1FF中却是padding-top多1如果要求不这个精确的话，是可以使用的；不同浏览器上按钮的不同显示效果和解决方法 - 推酷
不同浏览器上按钮的不同显示效果和解决方法
IE和FireFox在显示按钮时，具有不同的行为。这个行为在单独使用按钮时表现不太明显，但是当把一个很大的按钮放置到另外一个更小的包容元素时候，就表现的特别明显。比如放置到一个div元素当中，如下所示：
.buttonContainer {
.backbutton {
font-size: 20
font-family: A
font-weight:
font-style:
font-variant:
&div id=&widget1& class=&buttonContainer& style=&left: 4 top: 48 width: 31 height: 11 z-index: 1; cursor: border: 1&&
&div style=&height: 100%; width: 100%; border: 1&&
&button style=&height: 100%; width: 100%;& class=&backbutton&&Back&/button&
&div id=&widget2& class=&buttonContainer& style=&left: 4 top: 100 width: 31 height: 11 z-index: 1; cursor: border: 1&&
&div style=&height: 100%; width: 100%; border: 1&&
&input type=&button& value=&Back& style=&height: 100%; width: 100%;& class=&backbutton&/&
在FireFox和IE上分别执行上述代码后的结果如下：
& & &IE & & & & & & & & & & & & & & & & & & & & & & & & & FireFox
& & & & & & & & & & & & & & & & & & & & & & &
可以看到，虽然按钮的高度都设置为相对于包容元素的100%，但是在IE中按钮自动撑高了包容元素，而在Firefox中，按钮超出包容元素的部分被截断了。
为了解决上述问题，可以将按钮的高度设置为auto，如下所示：
&button style=&height: width: 100%;& class=&backbutton&&Back&/button&
&input type=&button& value=&Back& style=&height: width: 100%;& class=&backbutton&/&
在FireFox和IE上分别执行上述代码后的结果如下：
& & &IE & & & & & & & & & & & & & & & & & & & &FireFox
& & & & & & & & & & & & & & & & &
此时，当包容元素没有设置边框时候，IE和FireFox的显示效果就比较类似了。
另外，FireFox中的按钮看起来总是比用其他方式模拟的按钮大(比如A标签)，也比IE中的按钮大，原因是FireFox的按钮中有一个伪元素(Pseudo-elements)，可能用来当按钮获得焦点时候，显示按钮的虚边框。而这个伪元素会占据额外的高度和宽度。如
中描述的，我们可以通过设置特定于Firefox的css来解决这个问题。
/* Used within FF chrome to target CSS to specific URLs: being FF-specific,
it is also useful for targeting FF-only code */
@-moz-document url-prefix(http://) {
button::-moz-focus-inner, input[type=&button&]::-moz-focus-inner, input[type=&submit&]::-moz-focus-inner, input[type=&reset&]::-moz-focus-inner {
padding: 0 !
border: 0 none !
有时候，上述设置过后，仍然会发现按钮比其他模拟元素大，此时可以像
中描述的一样，根据页面具体情况，设置按钮的margin属性如下：
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top:-2
margin-bottom: -2
另外为了使各个浏览器中的按钮显示尽量一致，我们可以设置按钮的overflow属性为visible，width属性为auto，如
中描述的：
overflow: /* ie6/7 width fix */
width: /* ie6/7 width fix */
padding:1px 5
background:#
color:#333;
font:10pt arial, sans-
border:1px solid #
我们也可以全部使用图片按钮来代替普通按钮，如
中描述的。但是当需要国际化时候，则需要很多的图片来支持不同的语言，这个显然不太合适。
其他比较有意思的关于按钮和CSS的文章：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致