解決Button在IE6、7下的自適應(yīng)寬度問題
技術(shù)支持服務(wù)電話：15308000360 【7x24提供運(yùn)維服務(wù)，解決各類系統(tǒng)/軟硬件疑難技術(shù)問題】
很早就遇到過這么個(gè)小問題，但由于其并未影響到實(shí)際作用和美觀就沒有正面解決它，現(xiàn)在，我們來試著解決它。
寫一個(gè)Button，有兩種方式：其一，直接button標(biāo)簽；其二，input type=”button”。
不管哪種方式，Button的寬度在IE6、7下總是不能完美，接下來我們演示一個(gè)普通的Button，你可以用IE6或者IE7瀏覽器看看其顯示寬度，然后對(duì)比Chrome或者IE8等瀏覽器，你會(huì)發(fā)現(xiàn)Bug的所在。
1、一個(gè)普通的Button:
可以很直接的看到Button的兩邊有空隙，當(dāng)然，這個(gè)空隙是無法用padding:0來解決的。
通常，不少同學(xué)會(huì)想到給該Button定義一個(gè)width:100px。
2、width:150px的Button：
.demo-button01{width:150px;}
恭喜，你是對(duì)的。但是，我們必須這個(gè)Button自適應(yīng)寬度呢？
好吧，加個(gè)width:auto試試。
3、width:auto的Button：
.demo-button02{width:auto;}
哦也，還是不行！下面試試網(wǎng)上提供的一種方法。
4、width:auto;overflow:visible;的Button：
.demo-button03{width:auto;overflow:visible;}
Yes，可行！還有一個(gè)方法如下：
.demo-button04{width:1;overflow:visible;}
但個(gè)人覺得width:1的寫法很二，所以摒棄之。
結(jié)語(yǔ)：
如果你要問問什么IE6、7下會(huì)出現(xiàn)這樣的問題，我說是微軟很二。解決Button自適應(yīng)寬度的最佳辦法是width:auto;overflow:visible;
