IE CSS Bug系列:背景溢出

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

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

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

受影响的版本

这个bug影响的浏览器版本:IE6

表现

背景从元素中溢出(leak),覆盖文档流中接下去的其他元素。

教程日期

2009.7.17 11:36:49

描述

这个bug和内容消失bug有紧密的联系,甚至可能是同个原因的不同表现。CSS的初学者经常会一个特定的清除浮动元素在包含浮动的元素里面。IE在这方面有所不同。在IE里面包含浮动的元素必须有layout属性。否则要不就会出现背景溢出bug,要不出现内容消失bug(躲猫猫bug)。至于发生哪一个决定于页面渲染时清除浮动元素是否与浮动元素有所接触以及在clearer元素之后或里面是否有内容存在。另一方面,如果容器没有layout的话也会有一个bug。

示例

由于这个bug的性质,示例在一个独立的页面上。产生这个bug的典型代码在下面展示。

HTML Code:
CSS Code:

当上述代码 在IE7以下的的浏览器中渲染时,#container的背景会溢出覆盖#victim之上就像#victim设置了该背景一样。当滚动该页面时,这个bug就会消失。

 

解决方案

以下的解决方案按照方案类型排列。

解决方案(洁净方案)

解决日期

2009.07.17

修复的版本

所以受影响的版本。

描述

这个问题来自于在IE当中没有以正确的方式来包含浮动。用于清除浮动的元素在99.9%的情况下都是不需要的,不要使用它们。使用其他方法,IE中需要的是在包含浮动的元素中触发layout。

虽然这是一个“洁净方案”,我推荐你不要使用清除浮动的元素而是用下面的LS方法。以下是修复后的原始示例。

由于这个bug的性质,修复后的示例在独立的页面上,以下展示的是这个bug的典型的修复代码

HTML Code:
CSS Code:

HTML代码和和原始的一样,即使你知道不应该使用清除浮动元素。

CSS代码有点不同。我们给#victim加上了{float:left:}。显然这已经足够来修复这个背景溢出bug,不过可以预见会遇到由浮动引起的额外的bug。所以使用LS方法会更理想。

解决方案(layout方案)

修复版本

所有受影响的版本

描述

就像我之前所说的一样,这个问题来自于IE中没有用合适的方法来包含浮动。清除浮动元素在99.9%的情况下都是不需要的,不要用它们。相反,使用其他方法,IE中需要的是给包含浮动的元素触发layout。

为了展示上述所说的,我移去了不必要的清除浮动元素并使用了其他方法来包含浮动以修复原始示例。我在标准浏览器中用overflow属性来包含浮动而在IE中则给#container触发layout来包含浮动。

由于这个bug的性质,修复后的示例在独立的页面上,以下展示的是这个bug的典型的修复代码

HTML Code:
CSS Code:
Conditional Comments:

如你所见,在我们移除了清除浮动的元素并对#container应用{overflow:hidden;}来包含浮动。我们同时用条件注释的方法来触发#content的layout,这是在IE中包含浮动的正确方法,也是预防背景移除bug的方法。阅读haslayout教程来寻找最合适你的方法。

收藏 评论

关于作者:道禅

当一切都看起来无济于事的时候,我去看一个石匠敲石头.他一连敲了一百次,石头仍然纹丝不动.但他敲第一百零一次的时候,石头裂为两半.可我知道,让石头裂开的不是那最后一击,而是前面的一百次敲击的结果。(新浪微博:@卍道禅卐) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部