css - 在 div 中向左浮动在 IE7 中不起作用，但在 Firefox 和 IE8 中起作用

标签 css internet-explorer firefox cross-browser css-float

当我有三个都 float 的 div 时，我希望这些部分根据其中数据的长度展开或收缩。

例如，如果第一个地址很长，我希望第一个框展开并将第二个框推过去。在 Firefox 中它是这样做的，但在 Internet Explorer 中它需要一个宽度才能看起来正确。在 IE7 中它根本不正确显示 - 每个 div 都有一个包含两列的表格，而在 IE7 中它显示第二列到页面的远端而不是紧贴第一列尽管设置了 align=left第二列并在第一列上设置较小的宽度。我在母版页中指定了文档类型，并且尝试添加 clear:both 但没有成功。

为什么宽度会完全改变 float 部分在 IE 中的显示方式，我该如何解决这个问题？该页面在 IE7 中必须看起来不错。

.FloatingSection
{
    float:left;
    padding-bottom:10px;
    padding-right:10px;
}

<div id="FirstPerson" class="FloatingSection">
</div>
<div id="SecondPerson" class="FloatingSection">
</div>
<div id="ThirdPerson" class="FloatingSection">
</div>

我注意到在 IE8 中这看起来很好。

最佳答案

当你 float 元素时，你几乎应该总是包含一个明确的宽度。

如果您不这样做，浏览器必须猜测您的意思。在这种情况下，Firefox 比 IE 猜得更好，但你不应该让他们猜。尽可能明确。

编辑:如果您希望所有三个框都随着内容展开，我建议设置基于百分比的宽度。通常，您需要查找 fluid column layouts 的技术.

关于css - 在 div 中向左浮动在 IE7 中不起作用，但在 Firefox 和 IE8 中起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3390456/