IE CSS Bug系列:相对定位时overflow失效

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的@szxw 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG 系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文。

—————————————————————————–

受影响版本

该BUG影响: IE7,IE6

表现

当产生overflow的子孙元素的position属性被设置为”relative”时,无论元素的overflow属性设置为”hidden”还是”auto”,表现的都如同被设置为”visible”一样。

教程日期

2009-08-17 15:51:12 星期一

描述

这是我在Gérard Talbot的IE7 BUG 集合页上发现的另外一个BUG。我没节操地盗用了他的示例中的图片,因为我觉得这是一个精彩的演示该BUG的方式(希望他不介意)。我要对Gérard的BUG的描述做的补充是,块级元素也一样会无法剪裁,而且现在用{ overflow: auto; }替换{ overflow: hidden }也会一样出错。让我们看一下:

示例

示例在一个单独页面上。

HTM Code:

CSS  Code:

功能健全的浏览器将只会显示一个有边框的绿色方块。IE6和IE7浏览器则无法把方块裁剪为200px200px的容器尺寸,会显示图片的红色部分,而这部分是在200px200px的正方形之外的。另外,注意叠加的子孙元素覆盖了 .container 的边框。

 

解决方案

下面是按照解决方案类型排序的对上述问题的解决方案。

解决方案(最佳方案)

解决方案日期

2009-08-17 15:51:27 星期一

修复版本

所有受影响版本

描述

修复这个BUG的是相当简单的,让我们想看一下示例:

修复后的实例在一个单独页面上。

HTML Code:

CSS  Code:

我们的标记语言没有变化。我唯一增加的内容是,对父元素—.container <div>添加了{ position: relative; }。这样在IE6和IE7下也表现正常了。享受它吧!

收藏 1 评论

关于作者:酸斋笑我

我不会修电脑。 (新浪微博:@酸斋笑我) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
最新评论
  • jellychow   2013/10/24

    这个bug的出现不是因为块级元素无法剪裁,而是因为相对定位的元素的z-index比没定义该属性的要大。

跳到底部
返回顶部