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
   >
        

效果如圖所示：