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

日期:2020-12-13 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

今日在做网页页面的情况下发现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>

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