清理IE7的'float:right'删除bug的CSS修复

Question

我不断发现自己在IE7中浮现的元素存在问题.

我已经阅读了许多与此类似的Stack Overflow问题,但似乎没有任何一致的干净CSS答案.

我的意思是我希望看到不改变HTML的答案.例如:

• 将浮动元素放在第一位
• 在浮动元素之后添加'clear:both'div.

我知道有时浮动元素不会考虑其父级高度,因此有时无法正确包含它.偶尔我会发现自己'添加布局'到一个带缩放的元素:1有时会修复它.其他时候我发现自己在条件IE7样式表中搞乱了,这在我看来并不是最好的解决方案.

注意:我的意思是'有布局' - http://www.satzansatz.de/cssd/onhavinglayout.html

我还阅读了使用相对和绝对定位(父div和子div)的其他答案.拉起它但经常会影响周围的div.

如果有人能够深入解释这种情况发生的原因以及对各种修复方案的详细讨论,那么我很乐意为这个问题添加一笔赏金!

非常感谢!

编辑

我遇到的最常见的问题是我有这样的事情:

左侧边栏 - 主要 - 右侧边栏

浮动时,右侧通常会下降.理想情况下,这应该是左 - 右 - 主格式,但我不断发现自己的样式开发人员工作(主要是Drupal),在这种情况下,让他们改变工作太麻烦了.合理？因为我是造型开发人员的工作,他们从来没有把明确的块(我个人认为这是可怕的和肮脏的!)

Answer 1

介绍

你的标题表示希望看到修复float: rightdrop bug,但是你的文本暗示了一些更广泛的范围,希望看到解决方案"IE7中浮动元素的问题." 浏览器中有浮动元素(right或left)的许多常见问题.尽管人们可能会质疑IE7浏览器的支持是否值得关注,但对于某些人来说,毫无疑问它仍将持续一段时间.因此,我将借此机会立即解决有关该浏览器中浮动的许多问题.请注意,下面的许多实验和参考资料来自一个很好的资源:http://www.brunildo.org/test/index.html.

包含元素的CSS

对于浮动元素的包含父级,应设置以下css:

.container {
    overflow: auto; /* forces clearing of the child float */
    zoom: 1; /* give it layout (this can be some other css that does likewise) */
}

确保它hasLayout对于防止边距和填充错误类型很重要,这是一种偷看错误,并允许overflow清除.对于一系列浮点数,如果padding希望容器正常工作,某些html可能需要更改.

关于a的一个"drop"问题float: right,您可能希望避免在容器上设置显式height或max-height容器.A min-height没关系.设置a height然后float比容器高,这使得IE7不具有以下元素.我发现没有纯css解决方案.

如果容器本身position: absolute存在定位浮子的问题,可能需要将浮子本身设置为position: absolute而不是浮动.

参考文献:

• 对于overflow清除- http://www.quirksmode.org/css/clearing.html
• 边距 - http://www.brunildo.org/test/IEFloatAndMargins.html
• Peek-a-boo - http://www.brunildo.org/test/iew_boo.html和http://www.brunildo.org/test/iew_boo3.html
• 浮点序列填充 - http://www.brunildo.org/test/IEmfloa.html
• 避免height- http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/,http://www.brunildo.org/test/fenc7.html(和他类似的问题链接那个页面).
• 容器是absolute- 浮动太远了!

Floated Child的CSS

对于浮动的子元素,float: right要设置的css(另外)取决于两件事:

绝对容器

同样,如上所述,包含父母absolute可能需要改变孩子的处理方式.

浮动也是一个清除元素

如果float也将有一个clear设置就可以了,然后还有一些可以根据完全于产生许多问题html和css它周围的元素.没有单一的规范修复,请查看下面的参考资料.

参考文献:

• 容器是absolute- 浮动太远了!
• 也有clear- http://www.brunildo.org/test/IEWfc.html,http://www.brunildo.org/test/IEWfc2.html,http://www.brunildo.org/test/IEWfc3. HTML

浮动之前容器子元素的CSS

如果结构中float: right的元素html应该在其左侧(而不是在其上方),那么前面的元素必须是float: left.

浮动后容器子元素的CSS

一个明确的元素

对于一个元素之后的float已clear设置,那么如果有padding 和 background-color,确保它的hasLayout也避免了翻番padding; 这也防止clear了容器上方的额外空间padding,并避免了其他margin问题.

参考文献:

• 对于padding- http://www.brunildo.org/test/IEClearPadding.html和http://www.brunildo.org/test/IEFloatClearPadding.html
• 对于margins- http://www.brunildo.org/test/Op7_margins_float.html(向下看IE7的页面)

清晰元素之前的段落

具有a margin-bottom和更短的高度的段落float,位于浮动元素和清除元素之间,可以clear在float等于和等于之间产生额外的间隙margin.除了给段落提供零底部边距之外,没有已知的纯css修复(如果段落可能比浮点更高,则可能无法接受).

参考:

• 以下段落 - http://www.brunildo.org/test/IEFloatClearMargin.html

结论

我不能保证我已经解决了右浮动物体可能出现的每个问题,但肯定会涵盖许多主要问题.至于"为什么"这些事情发生,它在IE7中都是"bugginess".