Question

我一直在关注Internet Explorer错误列表，但我没有看到与此行为相对应的错误。这是一个已知的问题吗？如果是这样，它叫什么，有没有修复它？

问题：当我向左浮动块时，右边的未浮动块（即，仍然在“流”中）意外地向下移动以清除浮动块。我只在IE6和IE7中看到了这个问题。

在这个例子中，第5段应紧接在第3段和第2段的右侧。相反，它向下移动以清除第2段。

屏幕截图：http://prentissriddle.com/tmp/tmp-float.gif

代码：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
p { border: 1px solid #000; font-family: sans-serif; }
</style>
</head>
<body>
<p>Paragraph 1: unfloated.</p>
<p style="float: left; clear: left; width: 150px;">Paragraph 2: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 3: unfloated.</p>
<p style="float: left; clear: left; width: 150px;">Paragraph 4: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 5: unfloated.</p>
</body>
</html>

这是一个已知的错误吗？有修复吗？感谢。

Answer 1

IE6 / 7浮动错误是最好避免的噩梦。有没有什么方法可以使用除依赖clear之外的技术来实现所需的布局：left和floated元素？我使用我能想到的所有IE浮动修复技巧测试了你的代码（缩放：1，高度：1％，显式设置宽度，margin-left：在未开启的块上，各种显示：设置，通常建议来自Position Is Everything ...），但找不到能让IE6 / 7垂直排列的东西。太痛苦了！

我知道这可能是高度简化的虚拟代码，但我确实发现如果你切换源顺序并为所有段落指定一致的margin + padding，你可以使事情看起来一致：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">
        p { border: 1px solid #000; font-family: sans-serif; margin: 0; padding: 0; }
    </style>
</head>
<body>
    <p>Paragraph 1: unfloated.</p>
    <p style="float: left; clear: left; width: 150px;">Paragraph 2: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    <p>Paragraph 3: unfloated.</p>
    <p>Paragraph 5: unfloated.</p>
    <p style="float: left; clear: left; width: 150px;">Paragraph 4: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</body>
</html>

Answer 2

我在这个网站上找到了一个“答案”（至少对于IE7，我无法测试IE6）：http://www.brunildo.org/test/IEWfc2.html（案例4解决了你的情况，案例2）。我说“回答”，因为它确实需要一些额外的HTML代码和css，否则毫无价值。如果有办法检测浏览器并且只在需要时输入它，那可能是最好的。关键是在其上同时包含float和clear的元素之前引入另一个浮动元素。以下是代码的修改版本：

HTML

<p>Paragraph 1: unfloated.</p>
<p class="floated">Paragraph 2: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 3: unfloated.</p><span class="floatFix"></span>
<p class="floated">Paragraph 4: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 5: unfloated.</p><span class="floatFix"></span>

CSS

p { border: 1px solid #000; font-family: sans-serif; }
.floated {float: left; clear: left; width: 150px;}
.floatFix {float: left; width: 0; height: 0; margin: 0; padding: 0;}

未浮动的块意外地清除了IE6 / IE7中的浮动块

2 个答案: