解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容

最新推荐文章于 2022-06-04 19:11:15 发布

diliangzhi3351

最新推荐文章于 2022-06-04 19:11:15 发布

阅读量128

点赞数

原文链接：http://www.cnblogs.com/Angelinvestment/p/4283209.html

版权

IE6/IE7下父元素有相对/绝对定位时，子元素在IE6和IE7下overflow:hidden;失效，下面与大家分享下导致以上问题发生的情况及解决方法

令人蛋疼的IE，IE6/IE7下父元素有相对/绝对定位时，子元素在IE6和IE7下overflow:hidden;失效。
情况一：（在parent上增加position:relative）

代码如下:

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

　　情况二：（给son增加position:relative）

代码如下:

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

　　如下图：

如果.parent中的position设置为absolute也是如此。

终上所述：
哪个需要设置overflow；hidden，生效，就在哪个上面设置position:relative;

转载于:https://www.cnblogs.com/Angelinvestment/p/4283209.html