IE CSS Bug系列:不正确的浮动伸缩Bug

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。

这篇由伯乐在线前端开发小组的@nighca 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

 

影响的IE版本

这个 bug 影响 IE7、IE6

表现

跟随在其他浮动元素之后的浮动元素,设置clear属性时不能正确伸缩

教程编写时间

2009.8.18 21:17:12

描述

这是我在 Gérard Talbot 收集整理的 IE7 Bug 页面发现的bug之一(我大部分案例都是从那来的)。这个bug影响IE7跟IE6,表现就是设置了 clear 属性的浮动元素并不能正确地伸缩。我们来看一下:

演示

示例在这个独立页面
HTML代码:

CSS 代码:

在IE6跟IE7中可以发现第二、第三个<li>及<div>不能正确地伸缩。它们被“截”短了,过早伸缩了。据Sjaak Prieste所说(Gérard Talbot在这个bug中称赞了他),原因是这样的,IE首先把该浮动元素与上一个浮动元素渲染在同一行中,然后发现’clear’属性,清除浮动将其移到下一行,但没有重新排布文本。

我的演示中既有<div>也有<li>的原因是,这两种情况的处理方法有点区别。在“解决方案”中会有更多说明。

 

解决方案

以下是上述bug的解决方法(以类型排序)
解决方法(对清除进行标记)

该方法的时间

Tue Aug 18 21:17:26 2009

可修复的的版本

所有受该bug影响的版本

描述

我找不到一个像样的办法,如果谁有比较好的、相对简洁的办法,请评论给我!下面是我的方法:

修复bug的演示在这个独立页面

HTML Code:

CSS Code:

看下这边我做的事。在示例中的div部分,我在各div之间插入一个额外的<span>元素,并且通过 {display: inline-block;}给它一个”布局”(layout),然后设置其display属性为block。

因为<li>元素之间插入<span>元素不大合适,在示例的<ul>部分我将每个<li>的内容用一个<div>包起来,然后将那个div设为浮动(注意这边将 li 的浮动删掉了)。

在正常的浏览器里,最初的示例中浮动元素的伸缩可以完全适应其包围元素的变化,而我们的修复版本并不能做到。因而这个解决方法并不完美,不过也许可以帮助到你。

收藏 1 评论

关于作者:nighca

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

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部