Button在IE6、7下的自适应宽度问题解决方法
2012-02-23 16:39
585 查看
写一个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下总是不能完美,接下来我们演示一个普通的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下的自适应宽度问题
- IE7下解决A标签使用padding宽度自适应 padding失效的问题
- IE6,IE7下按钮(BUTTON)变宽的解决方法
- [转]ie6下表格宽度超宽bug,问题的解决方法(兼容ie6,7,8,ff)
- Ext JS Grid在IE6 下宽度的问题解决方法
- 解决IE6下div中文字显示竖排,IE7下div不能自适应高度问题
- 解决IE6下自适应宽度内嵌100%宽度表格问题
- IE6、IE7下a标签后面的span元素向右浮动后错位的解决方法
- css控制div下图片自适应解决方法:图片不超过最大宽度
- grid(datagrid、treegrid)自适应高度和宽度解决方法
- 在ie7下css居中样式text-align:center;偏左问题解决方法
- 在Windows 7下配置eCos开发环境的问题和解决方法
- CentOS7下安装NVIDIA独立显卡驱动出现X service error问题解决方法
- IE6、7下,宽度100%时,滚动条隐显的不可控问题
- IE6、IE7下页面跳转 无效问题解决方案
- IE6、IE内核国产浏览器 png 图片热点链接 不显示问题解决方法
- ie6-7 overflow:hidden失效问题的解决方法
- 完美解决IE6中fixed抖动问题的方法