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。

 

希望对大家能够有所帮助~~~

评论

2 楼 hope598 2010-06-12  

楼上的能否说下什么情况吗？

1 楼 ian_jiang 2010-06-12  

骗子你