css中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;