最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css中Button在IE6、7下的自适应宽度问题
时间:2012-02-22 编辑:简简单单 来源:一聚教程网
写一个Button,有两种方式:其一,直接button标签;其二,input type=”button”。
不管哪种方式,Button的宽度在IE6、7下总是不能完美,接下来我们演示一个普通的Button,你可以用IE6或者IE7浏览器看看其显示宽度,然后对比Chrome或者IE8等浏览器,你会发现Bug的所在。
1、一个普通的Button:
可以很直接的看到Button的两边有空隙,当然,这个空隙是无法用padding:0来解决的。
通常,不少同学会想到给该Button定义一个。
2、的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;
-
上一个: jquery选择器用法详细介绍
相关文章
- CSS布局自适应模块等分比例的例子 05-24
- CSS布局自适应等分比例例子 12-03
- Css三栏布局自适应实现几种方法 08-13
- css 表格自适应一些方法总结 11-18
- css div 三列自适应等高且中列宽度自适应 05-17
- css 左列自适应宽度的一行两列布局 02-09