Float left in a div 在 IE7 中不起作用，但在 Firefox 和 IE8 中起作用

Question

当我有三个 div 都剩下浮动时，我希望这些部分根据其中数据的长度来扩展或收缩。

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

为什么宽度会完全改变浮动部分在 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 中这看起来还不错。

Answer 1

刚刚发现如果你有一个浮动和一个明确的应用到一个DIV IE7 扼流圈。

相反，在 DIV 的 CSS 中指定浮点数，但删除 clear 并在相关 DIV 之后放置一个空 div，如下所示：

之前：

<div style="float:left; clear:right;">Content goes here</div>

之后

<div style="float:left;">Content goes here</div>
<div style="clear:right;"></div>

Answer 2

您是否考虑过display:inline-block 而不是浮动？如果不使用一些 JS 显式定义每个浮动元素的宽度，我认为您无法使用浮动和支持 IE 来做您想做的事情。

另外注意，您必须为 IE 中的块级元素声明第二条单独的规则：

HTML：

<div class="foo">test</div><div class="foo">bar</div>

CSS：

.foo { display:inline-block; }
.foo { display:inline; } /* Feed this to IE below 9 only with a CC. Don't feed it to modern browsers */

Answer 3

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

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

编辑：如果您希望所有三个框都随内容扩展，我建议设置基于百分比的宽度。一般来说，你会想要查找fluid column layouts 的技术。