css中position:relative和overflow:hidden之间的难题

2021-03-09 18:08 jianzhan
今日在做网页页面的情况下发现1个难题,在父标识中应用了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>

实际效果如图所示:
 
实际效果如上图一切正常显示信息。