首頁  >  文章  >  web前端  >  max-width和min-height不被IE6支援的解決方法

max-width和min-height不被IE6支援的解決方法

php中世界最好的语言
php中世界最好的语言原創
2017-12-16 11:01:151984瀏覽

今天帶給大家max-widthmin-height不被IE6支持的解決方法。

我們常常為了設定一個頁面最小高度來實現整頁內容未充實情​​況下也顯示的美觀,有時設定圖片最大寬度不撐破設定的寬度,我們就可以設定一個最小高度使用min- height 來實現,設定最大寬度限制使用CSS屬性中max-width來實現。但是問題來了IE7以上版本支持,但只有IE6不支援min-height ,MAX-height 、max-width、min-width,怎麼辦呢?

DIVCSS5介紹一種使用css hack來解決,大家知道一般我們對物件設定寬度或高度,如果圖片或內容大於設定的寬度IE6就會撐破設定的寬度和高度,這是我們可以利用這一點加上IE6獨特CSS辨識符合「_」來解決問題

例如我們一個網頁要設定個最小高度為500px才好看,但是IE6不支援怎麼辦呢?
正好我們就利用CSS屬性從左到右讀取、從上到下的重複屬性來取代最下最右的CSS屬性值。

具體CSS代碼如下:

.div{min-height:500px;_height:500px;}

注意:一定注意順序,前者IE7以上所有IE、火狐、谷歌都支持,後者只有IE6支持辨認,正好利用了此CSS HACK和CSS讀取先後順序來解決此問題。

當然還有直接以下CSS程式碼:

.div{height: expression(this.height> 500 ? 500 : true);  max-height: 500px;}

但此CSS程式碼會造成圖片載入後無法正常顯示(圖片隨機會被縮小無法正常顯示)

所以我們建議使用min-height:500px;_height:500px;來解決IE6不能max和min屬性的問題。


相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

駝峰命名與JS的問題解答

JS裡的布林值、關係運算子、邏輯運算子的詳解及實例

前端的js框架總結以及用途講解

以上是max-width和min-height不被IE6支援的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn