今天小编跟大家讲解下有关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
来源:爱蒂网