在IE6,IE7 中DIV容器固定高度的使用技巧

IE6和IE7對CSS的解釋存在很多差別,今天談其中一點:height 。
例子:
復制代碼代碼如下:div style="height:50px"

IE6下:如果DIV里的內容高度不超過50px , DIV的高度就是50px , 如果超過了設定的值,高度會隨內容而撐開,也就是通常說的自適應高度 。
IE7下:如果DIV里的內容高度不超過50px,DIV的高度就是50px , 如果超過了設定的值,DIV的高度仍會固定在50px,多余的內容會超過DIV而溢出,如果DIV下面還有其它內容,就會和溢出的內容重疊在一起 。

這顯然是一個非常值得注意的地方,若不處理會引起頁面錯亂 。解決這個問題通常分兩種情況:

一,高度為主:讓DIV的高度固定為50px,多出的內容要隱藏,兩個瀏覽器的CSS可一并寫為:
復制代碼代碼如下:div style="height:50px;overflow:hidden",overflow:hidden這個很重要,兼容性全靠他了

二:內容為主:讓DIV高度最小為50px,內容過多時DIV高度自適應內容多少 。這時需要用到CSS HACK做一些兼容處理:
div style=min-height:50px;_height:50px;,min-height:50px 最小高度,這個IE7和FF可識別 , _height:50px 加下劃線目的只讓IE6識別 。

相關經驗推薦