转:IE6下的min-height,min-width,max-height,max-width问题
在做页面布局时遇到了ie6不支持min-height问题,下面将分别描述问题及其解决办法:
Html代码
<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里面内容会被自动截断...
起初的解决办法为:
Html代码
#right{
min-height:300px;
height:auto !important;
height:300px;
}
但是后来发现如果右侧div里面包含图片,高度就会超过300px,这样遇到一个问题:right的高度不会自动拉长,内容被截断...
后来加了一句话让IE不但有了最小高度,还可以自动拉伸:
Html代码
#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。
Html代码
<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里面内容会被自动截断...
起初的解决办法为:
Html代码
#right{
min-height:300px;
height:auto !important;
height:300px;
}
但是后来发现如果右侧div里面包含图片,高度就会超过300px,这样遇到一个问题:right的高度不会自动拉长,内容被截断...
后来加了一句话让IE不但有了最小高度,还可以自动拉伸:
Html代码
#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。