手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >Button在IE6、7下的自适应宽度问题解决方法
Button在IE6、7下的自适应宽度问题解决方法
摘要:写一个Button,有两种方式:其一,直接button标签;其二,inputtype=”button”。不管哪种方式...

写一个Button,有两种方式:其一,直接button标签;其二,input type=”button”。

不管哪种方式,Button的宽度在IE6、7下总是不能完美,接下来我们演示一个普通的Button,你可以用IE6或者IE7浏览器看看其显示宽度,然后对比Chrome或者IE8等浏览器,你会发现Bug的所在。

1、一个普通的Button:

可以很直接的看到Button的两边有空隙,当然,这个空隙是无法用padding:0来解决的。

通常,不少同学会想到给该Button定义一个width:100px。

2、width:150px的Button:

.demo-button01{width:150px;}

恭喜,你是对的。但是,我们必须这个Button自适应宽度呢?

好吧,加个width:auto试试。

3、width:auto的Button:

.demo-button02{width:auto;}

哦也,还是不行!下面试试网上提供的一种方法。

4、width:auto;overflow:visible;的Button:

.demo-button03{width:auto;overflow:visible;}

Yes,可行!还有一个方法如下:

.demo-button04{width:1;overflow:visible;}

但个人觉得width:1的写法很二,所以摒弃之。

结语:

如果你要问问什么IE6、7下会出现这样的问题,我说是微软很二。解决Button自适应宽度的最佳办法是width:auto;overflow:visible;

参考资料:http://jehiah.cz/a/button-width-in-ie

【Button在IE6、7下的自适应宽度问题解决方法】相关文章:

img图片元素下多余空白解决方案

在ie7下css居中样式text-align:center;偏左问题解决方法

ie6,7下空DIV无任何内容时占据空间问题解决

div使用margin:0px auto不居中的原因分析及解决

CSS兼容IE6、IE7、IE8和Firefox浏览器的方法

div嵌套 img 空白解决方法

三列宽度自适应结构中的的DIV写法

ie placeholder属性的兼容性问题解决方法

IE6 innerHTML写入的iframe src不显示BUG的解决方法

css控制div不能居中的解决办法

精品推荐
分类导航