html - 在绝对容器中向右浮动和向左浮动 - IE7 扩展到 100% 宽度

Question

我正在尝试在绝对容器中向左浮动和向右浮动。它在 chrome 中工作正常，ff 预期的行为是 chrome 的行为......只有 child 的宽度而不是整个宽度。

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 指定的视觉格式模型时一直是一个蹩脚的浏览器。绝对定位的 block 元素应该收缩包装以适应它们的内容，而 IE7 允许它们拉伸(stretch)到最大可用宽度，甚至是 Canvas 宽度，如果它们包含一对 L- 和 R- float 元素。

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

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