css中position:relative和overflow:hidden的问题

最新推荐文章于 2023-11-02 16:25:02 发布

Devying

最新推荐文章于 2023-11-02 16:25:02 发布

阅读量2.1k

点赞数

分类专栏： HTML/CSS 文章标签： overflow hidden position

本文链接：https://blog.csdn.net/ying1989920/article/details/47406935

版权

HTML/CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在使用overflow:hidden;的父元素中，子元素position为relative时，IE6和IE7浏览器下可能出现的问题及解决方案。通过将父元素的position属性设置为relative，可以确保在不同浏览器环境下正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做网页的时候发现一个问题，在父标签中使用了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
   
   >

效果如图所示：