如何讓IE6支援max-width&min-width樣式

來源:互聯網
上載者:User

我們在寫CSS的時候,常常會遇到讓一個圖片或一個佈局不能超出設定一定寬度範圍值,有時需要設置一個最小寬度,接下來由DIVCSS5為大家總結的解決IE6不支援max-width和不支援max-width的方法。 以下為CSS 寬度之IE6支援最小寬度、最大寬度解決技巧(你可能需要進一步詳細瞭解CSS width知識)。


IE6支援最大寬度,解決CSS代碼:
.yangshi{max-width:1000px;_width:expression((document.documentElement.clientWidth|| document.body.clientWidth)<1000?" 1000px":"");overflow:hidden;}

說明:max-width:1000px; 這個是IE6以上級其它品牌瀏覽器支援最大範圍寬度。 而_width:expression((document.documentElement.clientWidth|| document.body.clientWidth)<1000?" 1000px":"");overflow:hidden;則是讓IE6支援max-width替代CSS代碼,但效果和其它版本瀏覽器相同效果。

讓所有瀏覽器都支援max-width的CSS樣式代碼,完整:
max-width:1000px;_width:expression((document.documentElement.clientWidth|| document.body.clientWidth)<1000?" 1000px":"");overflow:hidden; 這裡的1000和1000px是你需要的數值,注意3個數值的相同。

設置最大max-width的時候別忘記加上overflow:hidden;

2、IE6支援min-width解決方法
IE6支援最小寬度,解決CSS代碼:
.yangshi{min-width:1000px;_width:expression((document.documentElement.clientWidth|| document.body.clientWidth)>1000?" 1000px":"");}

說明:min-width:1000px; 這個是IE6以上級其它品牌瀏覽器支援最大範圍寬度。 而_width:expression((document.documentElement.clientWidth|| document.body.clientWidth)>1000?" 1000px":"");則是讓IE6支援min-width替代CSS代碼,但效果和其它版本瀏覽器相同效果。

讓所有瀏覽器都支援min-width的CSS樣式代碼,完整:
min-width:1000px;_width:expression((document.documentElement.clientWidth|| document.body.clientWidth)>1000?" 1000px":"");
這裡的1000和1000px是你需要的數值,注意3個數值的相同。

3、讓IE6支援min-width同時又支援max-width解決方法
讓IE6即支援最小寬度又支援最大寬度限制設置。 這種情況我們常常碰到對圖片控制,讓不確定大小的圖片,如果太寬,不能超出一定範圍值,小的時候不控制他的方法,用到CSS代碼:

_width:expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));


對圖片控制CSS完整代碼:

img{max-width:620px;_width:expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));}

這裡說明:圖片不能超出大於620px的寬度,又不小於1圖元的寬度。

讓所有瀏覽器包括IE6瀏覽器支援最大寬度又支援最小寬度DIV CSS代碼:
.yangshi{max-width:620px;min-width:1px;_width:expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1? "1px" : "auto"));}

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.