向右浮动并向左浮动在绝对容器中 - IE7扩展到100％宽度

Question

我正试图向左漂浮并向右漂浮在一个绝对容器中。它在chrome，ff中运行良好 预期的行为是chrome..to只是让孩子的宽度不是整个宽度。

HTML

<div class='container'>
    <div class='floatLeft'>float left </div>
    <div class='floatRight'>float right </div>
</div>

CSS

.container{
    background-color: orange;
    position:absolute;
}
.floatLeft{
    float:left;
    background-color: green;
}
.floatRight{
    float:right;
    background-color: yellow;
}

在IE和Chrome

中

Answer 1

这是由于IE7在实现W3C规定的可视化格式化模型时一直是一个糟糕的浏览器。虽然绝对定位的块元素应该收缩包装以适应它们的内容，但IE7允许它们伸展到最大可用宽度，甚至是画布宽度，如果它们包含一对L-en R-浮动元素。

我建议不再为IE7编码了。他们的所有者必须主动阻止Windows Update将其更新为8.每次更新，甚至直到今天。如果您在兼容模式/视图中担心更高的IE版本，有一些简单的方法可以在用于访问您的网站时强制它们进入自然的，自己的模式。

此外，它很少被使用。我甚至听说它昨天离开了大楼。 :-)