解决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;}

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的写法很二，所以摒弃之。

解决Button在IE6、7下的自适应宽度问题,布布扣,bubuko.com