清除ie7的“浮动:右”删除错误的CSS修正

Question

我不断地发现自己对IE7中的元素有问题。

我读过许多类似于这个问题的堆栈溢出问题，但似乎没有任何一贯干净的CSS答案。

我的意思是，我想看到不改变的答案。例如：

• 将浮动元素放在
• 之后，在浮动元素之后添加一个“清除:两个”div。

。

我理解，有时浮动元素不考虑其父母的高度，因此有时不能正确地包含它。偶尔，我发现自己“添加布局”到一个元素的缩放:1，这有时修复它。其他时候，我发现自己在一个条件IE7样式表中乱搞，在我看来，这不是最好的解决方法。

注意:我所说的“有布局”是什么意思- http://www.satzansatz.de/cssd/onhavinglayout.html

我还读过其他关于使用相对定位和绝对定位的答案(分别是父div和子div )。这拉了它，但经常影响周围的div。

如果有人能对发生这种情况的原因进行深入的解释，并详细讨论各种修复方法，最好是！，我很乐意在这个问题上加上一个慷慨的答案。

非常感谢！

编辑

我遇到的最常见的问题是当我遇到这样的事情时：

左边框-主-右边框

在漂浮的时候，权利往往会下降。理想情况下，这应该是左-右-主格式，但我不断发现自己的风格开发工作(主要是Drupal)的情况下，这是太多的麻烦，让他们改变他们的工作。讲得通?因为我在设计开发人员的风格，他们从来没有把清楚的块也放在里面(我个人认为这是可怕和肮脏的！)

Answer 1

引言

您的标题表示希望看到float: right删除错误的修复，但您的文本意味着希望看到“元素在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可能需要更改。

关于float: right中的一个“drop”问题，您可能希望避免在容器上设置显式height或max-height。min-height是可以的。设置一个height，然后让float比容器高，使得IE7不具有以下元素。没有我已经注意到的纯css解决方案。

如果容器本身是position: absolute，则在定位浮点数时可能会出现问题，这可能要求将浮点数本身设置为position: absolute，而不是浮动。

参考文献：

http://www.quirksmode.org/css/clearing.html

• Margins - 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

• Avoiding height - http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/，http://www.brunildo.org/test/fenc7.html (而他在page).

• Container上的类似问题链接是absolute - Floating Too Far Right!

)。

用于浮动儿童的CSS

对于已浮动的子元素，要设置的css (除float: right外)取决于两件事：

绝对容器

同样，如上所述，包含absolute的父级可能需要更改子节点的处理方式。

浮点也是一个Clearing元素

如果float也有一个clear集，那么就会出现许多问题，完全取决于它周围元素的html和css。没有单一的规范修复，所以请看下面的引用。

参考文献：

Floating Too Far Right!

• Also
• 容器是absolute --有clear的absolute- http://www.brunildo.org/test/IEWfc.html，http://www.brunildo.org/test/IEWfc2.html，clear

浮动之前容器的子元素的CSS

如果float: right遵循html结构中应该向左(而不是在其上方)的元素，那么前面的元素必须是float: left。

浮点数后容器的子元素的CSS

一个清晰的元素

对于在float之后有clear集的元素，如果它有padding和background-color，那么确保它也是hasLayout，以避免将padding加倍；这还可以防止由于容器padding而导致clear上的额外空间，并避免其他margin问题。

参考文献：

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

清楚元素前面的段落

在浮动元素和清除元素之间有一个具有margin-bottom且比float短于float的段落，可以在clear和float之间创建一个等于该margin的额外间隔。除了给段落一个零的底部裕度之外，没有任何已知的纯css修正(如果段落可能比浮点数高，这可能是不可接受的)。

参考资料：

http://www.brunildo.org/test/IEFloatClearMargin.html --

• 段落

结论

我不能保证，我已经解决了每一个问题，可能会出现一个正确的浮动对象，但肯定有许多主要的问题。至于“为什么”会发生这些事情，这都是IE7中的“错误”。

Answer 2

您是否尝试过使用clearfix解决方案来折叠div？在这方面有不同的版本，并且有一个更新的版本，但我没有这个url，但是这是标准的清除css，您可以将它添加到正在折叠并导致浮动元素http://www.webtoolkit.info/css-clearfix.html问题的父元素中。Chris在这里有一个更好的http://css-tricks.com/snippets/css/clear-fix/版本。

您说“我理解有时浮动元素不考虑其父元素的高度，因此有时不能正确地包含它”这是正确的，如果所有子元素都被浮动，父元素就会崩溃。这是因为从正常流中删除了元素，当这种情况发生时，父div无法计算它的高度并崩溃，就好像div内部没有任何东西一样。

但是没有看到页面和你的问题，我只能估计这个问题是由于IE6-IE7的有布局属性造成的，这是非常烦人的，他们把它从版本8向上排序，但是它确实为您的构建增加了额外的开发时间。

但是在大多数情况下，清除解决方案是最好的，因为它不会向页面添加额外的标记，例如

<div style="clear: both"></div> 

这是旧的，过时的，应该避免。

我希望这对你有帮助，如果你需要更多的信息，或者我还没有回答你刚才问的问题。

Answer 3

我们多年来一直在使用clearfix解决方案。

.cf:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.cf { display: inline-block; }
html[xmlns] .cf { display: block; }
* html .cf { height: 1%; }

这是一个简单的CSS类，理想情况下，它必须应用于具有任何子浮点元素的容器。由于您对根本不更改HTML有限制，所以可以：

1. 将所有出现的.cf替换为您自己的div选择器或
2. 使用JS应用该类(这很糟糕，因为用户会在页面完全加载前几秒钟内看到一个中断的布局)，或者
3. 使用PHPob_start()+ regex应用类或

H 110只需使用表重写所有内容(就像我们在90年代时所做的那样)H 211G 212