建站资讯

input按钮在各浏览器之间的兼容性设置

2012-09-19 23:58:46

浏览:

以下是转载自某网友的一篇input按钮在各浏览器之间的兼容性设置文章:本人在参考这篇文章和实践测试中总结了一点,在IE下要input按钮左侧有默认的长度,如果需要他显示正常需要设

以下是转载自某网友的一篇input按钮在各浏览器之间的兼容性设置文章:本人在参考这篇文章和实践测试中总结了一点,在IE下要input按钮左侧有默认的长度,如果需要他显示正常需要设置:overflow:visible; 而自火狐和谷歌浏览器下需要设置按钮的左侧填充,设置像素是不管用的,需要设置字宽即:em.本文关键字:IE下input按钮左右有默认宽度不管怎么设置都解决不了怎么办?火狐和谷歌浏览器调试input按钮宽度设置没反应怎么办?

因为工作的缘故,最近接触到的web表单非常的多,和很多朋友一样,在没有接触过这么多表单之前,我以为表单就那几个input、type,一个输入框,一个文本域,一个提交按钮。后来才发现,太天真了,就像很多人以为:UI不就是搞美工的吗?

其实web表单设计真的是一门艺术,需要考虑和做的一点也不少。以后有时间会慢慢的将一些想法和问题讲出来和大家分享,今天先来讲讲input按钮在各个浏览器之间的兼容性问题。我们来看一段简单的代码:

input.item {
background: #4D90FE;
border: 1px solid #4D90BB;
color: white;
}

这是很简单的一个input提交按钮,它在各大浏览器中的情况如下:

input默认状态

input默认状态

很明显,我们会看到它在每个浏览器中的效果都是长短不一,参差不齐的,哪个是标准的也不好说。

现在我们来对他进行一个修正,我用的修正样式如下:

.item input {
background:#4D90FE;
border:1px solid #4D90BB;
color:white;
font-family:Arial,sans-serif,Tahoma; /*规定同一字体*/
font-size:12px; /*规定同一字体大小*/
height:25px; /*解决Safari和Chrome下的高度问题*/
line-height:15px; /*协调height,让文字居中*/
overflow:visible; /*只有设置这个属性IE下padding才能生效*/
padding:0 0.5em; /*chrome、ff默认值;调整其值,让IE和其他浏览器的一样*/
}

后面有注释的六行就是后来添加的。我们从上图可以看到,chrome下高度“有问题”,不符合我们的预期。经测试,firefox下给input设置line-height值是无效的,这应该是firefox中已经给input标签的line-height值定死了,那就只有从height和padding入手了。经测试,firefox和chrome下,input中padding都有一个默认值padding:0 0.5em;当我们将padding调至此默认值时,发现IE下的input按钮的高度有了变化。再经过height与line-height协调,最终修复的input按钮效果如下:

input按钮修复后

input按钮修复后

这时候可以看到,input按钮的高度在各大浏览器下都一样了。我们来个对比:

input按钮修正前后对比

input按钮修正前后对比

什么?效果还不够直观?好吧,我们将input按钮放大并标注他的像素来看看:

input按钮放大后对比效果

input按钮放大后对比效果

经过修正,我们可以让input按钮的高度都达到一致(25px),宽度width方面,IE7、IE8、IE9、chrome表现的效果都是一致(38×25)的,这次最让我失望就是firefox了,width居然达到44px。

有的朋友可能还会用到一个width:1;或者width:1;以及width:auto;  这几个是什么意思呢?根据老外的解释,width:1或者width:0是为了修正IE中table-cell产生的margin,而width:auto则是针对非IE浏览器而做的取消上面width:1对margin的修复,详细可以自己到这里看看:An Even Better IE Button Width Fix。但奇怪的是,我加上和去掉这几个width的属性发现对上面测试的各个浏览器的input按钮并没有发生变化,不得其解,于是乎便去掉了这几个属性。

有朋友可能会说了,宽度不一致,还不是等于没修复吗?好吧,我认为企图通过纯粹的CSS样式去让input标签样式中各个浏览器达到一致的效果几乎是不可能的,这不应该是表单设计需要过于纠结的问题,别在这方面浪费太多时间了。也不是说完全没有办法的,其中很多用js可以模拟实现一致的效果,最经典的就是select下拉框,以后有时间我们再来说说这个。

作者: admin
input按钮在各浏览器之间的兼容性设置
以下是转载自某网友的一篇input按钮在各浏览器之间的兼容性设置文章:本人在参考这篇文章和实践测试中总结了一点,在IE下要input按钮左侧有默认的长度,如果需要他显示正常需要设
长按图片保存/分享

深圳网站设计公司

启邦互动作为深圳专业的建网站公司,专注于为客户量身定制高品质的网站。我们拥有丰富的经验和专业知识,注重细节,追求完美,确保每个项目都能够顺利交付并得到客户的满意认可。选择启邦互动,您将获得专业的网站建设开发服务,为您的业务发展提供有力支持。

联系方式

深圳市龙岗区吉华街道水径综合楼6c-1

Call us : + 137 2425 9054

Email us : service@sz-qibang.com

在线咨询

您好,请点击在线客服进行在线沟通!

联系方式
热线电话
17727976231
上班时间
周一到周五
E-mail地址
service@sz-qibang.com
扫一扫二维码
二维码
扫码咨询
添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了