IE 7浮动问题不忽略内容

Question

我在 IE7 中遇到问题。我创建了以下 html 来演示可能的“问题”。

HTML：

<div id="container">
    <div id="head">
    </div>
    <div id="left">
    </div>
    <div id="right">
    </div>
    <div id="no-float">
    </div>
</div>

CSS：

#container {
    width:200px;
    height:200px;
    margin: 0 auto;
    background-color:#555555;
}
#head {
    width:200px;
    height:20px;
    background-color:black;
    float:left;
}
#left {
    width:100px;
    height:40px;
    background-color:blue;
    float:left;
}
#right {
    width:100px;
    height:40px;
    background-color:red;
    float:left;
}

#no-float {
    width:20px;
    height:20px;
    position:relative;
    background-color:green;
}

现在我希望绿色的无浮动 div 位于容器的最左上角，因为据我了解，正常内容应该完全忽略浮动内容。这在我测试过的所有浏览器中都可以正常工作，而不是在 IE7 中。这是我对浮点数的理解有问题还是 IE7 中的错误？如果这是一个错误，谁能指出我正确的方向来修复它？这是问题的一个jsfiddle。

JSFiddle

Answer 1

IE7 的浮动模型很可怕。 See here 与您的问题相关的问题，以及为什么它不能通过仅使用浮点数来解决。如果您想将元素保持在您拥有的源顺序中，您将不得不求助于绝对定位。这可以有条件地提供给 IE7，或者它可以像所有现代浏览器一样工作。

Here is the fiddle.

将position: relative 添加到#container，然后

#no-float {
    width: 20px;
    height: 20px;
    position:absolute;
    background-color:green;
    top: 0;
    left: 0;
}