CSS中overflow:hidden在ie6、ie7無效不能隱藏解決辦法

這就是ie6、ie7 的bug。

解決方案：

當父元素的直接子項目或者下級子項目的樣式擁有position:relative屬性時，父元素的overflow:hidden屬性就會失效。
我們在IE 6 7內發現子項目會超出父元素設定的高度，即使父元素設定了overflow:hidden。

解決這個bug很簡單，在父元素中使用position:relative;即可解決該bug。

例子

代碼如下

複製代碼

<style type="text/css"> .parent{ width:100px; height:100px; position:absolute; border:1px solid #f00;} .son{ width:100px; height:100px;left:0;top:0; overflow:hidden; position:relative;} p{margin:0;padding:0;} </style> <div class="parent"> <div class="son"> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> </div> </div>

解決原理是:子項目設定絕對位置，父元素相對定位，這樣overflow:hidden就不會失效了