css中position:relative和overflow:hidden的問題

今天在做網頁的時候發現一個問題，在父標籤中使用了overflow:hidden;時，如果子標籤中有元素的position設置成relative的時候，在IE6和IE7中父元素的overflow對其將不起作用，在IE8、FF，Chrome中均正常顯示如下代碼：

<div style="height:100px; width:100px; background:#CCC; overflow:hidden;">
<div style="height:300px; width:90px; background:#999; position:relative;"></div>
</div>

效果如下圖：

解決方案：將父標籤的position也設置成relative，代碼如下：

<div style="height:100px; width:100px; background:#CCC; overflow:hidden; position:relative;">
<div style="height:300px; width:90px; background:#999; position:relative;"></div>
</div>

效果如圖所示：