【css】ie6 和 ie7 下 position 与 overflow 的问题_html/css_WEB-ITnose

前几天做的项目中碰到这样一个问题，在 ie6 和 ie7 下，给父元素设置 overflow:hidden 不起作用无法隐藏，后来发现是子元素中有设置 position:relative，如果子元素删除 position:relative，那么父元素的 overflow:hidden 可以隐藏，具体代码及效果如下：

html 代码：

        *{margin:0;padding:0;}    .w{width:480px;margin:50px auto;}    .w ul{width:100%;overflow:hidden;height:144px;border:1px solid #f00;}    .w li{position:relative;height:36px;width:108px;border:1px solid #d1d1d1;line-height:36px;text-align:center;float:left;display:inline;margin:0 10px 10px 0;}    
        
111111111
            
222222222
            
333333333
            
444444444
            
555555555
            
666666666
            
777777777
            
888888888
            
999999999
            
000000000
            
111111111
            
222222222
            
333333333
            
444444444
            
555555555
            
666666666
            
777777777
            
888888888
            
999999999
            
000000000
        

登录后复制

ie6 和 ie7 下效果：

解决方法：

立即学习“前端免费学习笔记（深入）”；

给父元素设置 position:relative。