css hack---IE6下的min-height,min-width,max-height,max-width問題

在做頁面佈局時遇到了ie6不支持min-height問題，下面將分別描述問題及其解決辦法：

<div id="all">
    <div id="left"></div>
    <div id="right"></div>
</div>

 

說明一個div中包括了兩個div：left和right，left高度爲300px，right高度不定。問題：讓left和right兩個div的高度能夠始終都保持一致。如果讓right的高度自動，但是當right的高度小於left高度時，left裏面內容會被自動截斷...

起初的解決辦法爲：

#right{
    min-height:300px;
    height:auto !important;
    height:300px;
}

 

但是後來發現如果右側div裏面包含圖片，高度就會超過300px，這樣遇到一個問題：right的高度不會自動拉長，內容被截斷...

後來加了一句話讓IE不但有了最小高度，還可以自動拉伸：

#right{
    min-height:300px;
    height:auto !important;
    height:300px;
    overflow:visible;
}

 

也可以使用width:expression(document.getElementById("").width>300?"300px":"auto");來約束相應div的高度。但是該方法有個和js一樣的執行過程：必須要等到兩個div都加載完成了纔有效果，而不會像min-width一樣，未載入前就限制了寬度。不過一次加載expression是不會導致內存泄露的。

 

同理：min-width,max-height,max-width也可以使用上述兩種方法解決該hack。

 

希望對大家能夠有所幫助~~~