今天帶給大家max-width和min-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中文網其它相關文章!
相關閱讀:
以上是max-width和min-height不被IE6支援的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!