很早就遇到過這么個小問題,但由于其并未影響到實際作用和美觀就沒有正面解決它,現(xiàn)在,我們來試著解決它。
寫一個Button,有兩種方式:其一,直接button標簽;其二,input type=”button”。
不管哪種方式,Button的寬度在IE6、7下總是不能完美,接下來我們演示一個普通的Button,你可以用IE6或者IE7瀏覽器看看其顯示寬度,然后對比Chrome或者IE8等瀏覽器,你會發(fā)現(xiàn)Bug的所在。
1、一個普通的Button:
可以很直接的看到Button的兩邊有空隙,當然,這個空隙是無法用padding:0來解決的。
通常,不少同學會想到給該Button定義一個width:100px。
2、width:150px的Button:
.demo-button01{width:150px;}
恭喜,你是對的。但是,我們必須這個Button自適應(yīng)寬度呢?
好吧,加個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,可行!還有一個方法如下:
.demo-button04{width:1;overflow:visible;}
但個人覺得width:1的寫法很二,所以摒棄之。
結(jié)語:
如果你要問問什么IE6、7下會出現(xiàn)這樣的問題,我說是微軟很二。解決Button自適應(yīng)寬度的最佳辦法是width:auto;overflow:visible;