处理IE6,IE7不可以掩藏(overflow:hidden)肯定精准定位

2021-01-20 11:02 jianzhan

让人蛋疼的IE，IE6/IE7下父元素有相对性/肯定精准定位时，子元素在IE6和IE7下overflow:hidden;无效。
状况1：（在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>

状况2：（给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;