CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法-CSDN博客

在我们做前端时会碰到一个固定的宽度当文字超过我们这个固定宽度时我们不换行的同时希望文字隐藏了，那我们通常会使用overflow:hidden来隐藏文字，但是发现在ie6,ie7下overflow:hidden无效了，那么如何解决这个问题呢？

这就是ie6、ie7 的bug。

解决方法：

当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。
我们在IE 6 7内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。

解决这个bug很简单，在父元素中使用position:relative;即可解决该bug。

例子

代码如下
复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<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> 
</head>
<body>

<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>

</body>
</html>