css - IE 7 float 问题不忽略内容

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;
}

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

JSFiddle

Answer 1

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

Here is the fiddle.

在#container中添加position: relative，然后

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