服務項目:網站建設、仿站、程序開發、APP開發設計、移動網站開發設計、企業網站設計、電子商務網站開發、網站維護、網站推廣、UX/UI 、HTML5、CSS3、JS / Jquery ...
四川浚網科技有限公司
四川浚網科技有限公司 (開發設計官網)TEL : 15308000360 / QQ : 38585404

您的位置:首頁 > 技術經驗 > 前端開發 > 正文

解決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;



上一篇:簡單HTML5打造內涵搜索框
下一篇:解決 Firefox 下 input button 內文字垂直居中

相關熱詞搜索:button
历届英超联赛冠军 欢乐彩是真的还是假的 政府产业基金配资 浙江20选5一等奖多少钱 黑龙江快乐十分开奖号码 仙牛网配资 新11选5 彩票通软件 中海集运股票行情分析 p3试机号今天 贵阳微乐麻将下载 甘肃11选5遗漏查询 全网配资 网上玩广东11选5 浙江麻将 宁夏11选5开奖助手 下载四人真人打麻将大众麻将 广东快乐10分有规律吗