如下面的代码:
<style type="text/css"> | |
#box { | |
background:red; | |
width:80px; | |
height:80px; | |
float:left; | |
} | |
#wrap { | |
border:solid 1px blue; | |
} | |
</style> |
<div id="wrap"> | |
<div id="box"></div> | |
</div> |
#wrap{
height:1%;
}
这种方法对于IE的任意元素都有效,除了标准兼容模式下的IE6版本中的行内元素。但是这种方法不能够与overflow:hidden;一起使用,否则这个定义的高度就会对元素的实际高度产生影响。当然这种共同的情况也有一个除外,那就是在IE6 标注模式下,overflow:hidden;声明不会对这个高度产生实际影响,因为这时如果父元素没有显示定义高度,那么height:1%;会自动被IE6解析为height:auto。
使用高度来触发IE元素的layout特性是最佳的选择。不过如果当为元素声明了overflow:hidden之后,使用高度来触发layout特性就会出现各种问题,在这种情况下可以用display:inline-block或zoom:1声明来触发layout特性。
#wrap{
display:inline-block;
}
或
#wrap{
zoom:1;
}
除了避免与overflow;hidden;声明冲突之外,上面这两种方法还可以适用行内元素,以及在IE标准模式下触发元素的layout特性。