头闻号

中泰致远(天津)涂料有限公司

特种涂料|防腐涂料|金属漆|船舶涂料|精细化学品代理加盟|其他未分类

首页 > 新闻中心 > 科技常识:Button在IE6、7下的自适应宽度问题解决方法
科技常识:Button在IE6、7下的自适应宽度问题解决方法
发布时间:2024-09-30 19:40:33        浏览次数:5        返回列表

今天小编跟大家讲解下有关Button在IE6、7下的自适应宽度问题解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关Button在IE6、7下的自适应宽度问题解决方法 的相关资料,希望小伙伴们看了有所帮助。

写一个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

来源:爱蒂网