在早期的IE浏览器版本IE6和IE7中，CSS的overflow属性有时候并不像在其他浏览器中那样正常工作。尤其是当涉及到绝对定位元素时，即使设置了overflow:hidden，溢出的内容也有可能无法被隐藏，这给页面的布局和显示效果带来了麻烦。
在IE6和IE7中，当父元素采用相对定位(position: relative)或绝对定位(position: absolute)时，其内部的子元素即使应用了overflow:hidden，也无法隐藏溢出的部分。这种情况通常与这些浏览器对CSS盒模型的理解和处理方式有关。
为了解决这个问题，通常有两种方案：
第一种方案是在父元素上增加position:relative属性。这实际上是在修复一个因父元素缺少定位而产生的渲染问题。在IE6和IE7中，如果父元素没有明确的定位属性，那么其内部的绝对定位元素的溢出部分可能不会被正确处理。给父元素添加position:relative属性后，可以使得绝对定位的子元素的overflow属性能够正常工作。
第二种方案是直接在绝对定位的子元素上设置overflow:hidden和position:relative。在这种情况下，无论父元素是相对定位还是绝对定位，都可以通过给子元素设置position:relative来保证overflow:hidden属性生效。
为了更详细地说明这一点，我们可以参考提供的样式和HTML结构。在第一种情况中，给具有相对定位的父元素添加了position:relative，并设置了overflow:hidden属性。HTML结构如下：
```html
<div class="parent">
<div class="sonF">
<div class="son">
<!-- 内容 -->
</div>
</div>
</div>
```
CSS样式：
```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;
}
```
第二种情况中，直接给绝对定位的子元素设置了overflow:hidden和position:relative属性，HTML结构如下：
```html
<div class="parent">
<div class="son">
<!-- 内容 -->
</div>
</div>
```
CSS样式：
```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;
}
```
通过上述两种方法，无论是哪种情况，都可以在IE6和IE7中成功隐藏绝对定位元素内部溢出的内容。这个问题和解决方案与IE6和IE7浏览器的CSS渲染机制有关，这些浏览器对某些CSS规则的处理方式与其他浏览器有所不同，因此需要特别注意这些差异并应用相应的兼容性处理方法。
