IE CSS Bug系列:有layout的元素无法浮动

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

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

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

影响的IE版本

这个 bug影响 IE7、IE6

表现

拥有layout的元素消除了浮动,而不是去环绕浮动元素

教程编写时间

2009.8.17 14:47:09

描述

这个bug我是在Gé rard Talbot’s IE7 Bug Collection Page看到的。尽管我知道这个bug其实是被利用来消除浮动的,我依然决定把Gé rard Talbot的demo连同一个可能不是很靠谱的解决方法发布出来,这个方法可能会帮助到一些人解决这个问题。我们来看一下:

演示

演示在一个单独的页面

HTML Code:

CSS Code:

在正常的浏览器中#floated这个 <p>会出现在 #text这个 <p>内部——它就应该这样。而在 IE6、 IE7中,因为 #text拥有了 layout(从 width来的), #text会“畏惧”地逃开到 #floated的边上,就好像是我们给 #text添加了 overflow:hidden或是 overflow:auto。

 

解决方案

以下是上述bug的解决方法(以类型排序)

解决方法 (干净的标记方法)

该方法的时间

2009.8.17 14:58:01

可修复的的版本

所有受该bug影响的版本

描述

这个解决方法牵涉到移除#text的 layout。我们来看下 demo中是怎么做到的。

修复的demo在一个单独的页面

HTML Code:

CSS Code:

我所做的是在#text、 #floated的外部添加了一个额外的元素——#container这个 <div>,然后将 width属性从 #text移到 #container上,这样渲染出的结果与一开始的 demo一致。

我承认,这与其说是一个解决方法,不如说是某个示例。既然bug是由 layout引起的,那么解决之道在于摆脱它,而达到这一目的的方法肯定多种多样。

最后,我想补充下,移除元素的layout的行为可能会导致你遇上“消失的内容的 bug”;既然不能通过给予元素 layout修复这个 bug,你可以试下添加{ position: relative; }代替。如果失败了,你可能需要重新思考一下你的方法。

收藏 评论

关于作者:nighca

(新浪微博:@nighca) 个人主页 · 我的文章 ·   

相关文章

可能感兴趣的话题



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