在我们做前端时会碰到一个固定的宽度当文字超过我们这个固定宽度时我们不换行的同时希望文字隐藏了， 那我们通常会使用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>
解决原理是:子元素设置绝对定位，父元素相对定位，这样overflow:hidden就不会失效了
时间： 2024-10-11 18:37:25