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

现在我希望绿色no-float div位于容器的最左上方，因为我理解正常内容应该完全忽略浮动内容。这在我测试过的所有浏览器中都是预期的，而不是在IE7中。我对浮动的理解是一个问题，还是IE7中的一个错误？如果它是一个bug，任何人都可以指出我正确的方向来修复它吗？这是问题的一个方面。

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

IE 7浮动问题不忽略内容

1 个答案:

Here is the fiddle.