在div中留下的浮点在IE7中不起作用，但在Firefox和IE8中起作用

Question

当我有三个div都悬空时，我希望这些部分根据它们内部数据的长度来扩展或收缩。

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

为什么宽度完全改变浮动部分在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

当您浮动元素时，您几乎总是应该包含显式宽度。

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

编辑：如果您希望所有三个框都随内容扩展，我建议设置基于百分比的宽度。 通常，您将需要查找流体列布局的技术。

Answer 2

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

相反，在DIV的CSS中指定float，但删除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 3

您是否考虑过display:inline-block而不是浮动？ 我不认为你可以用浮点数做你想要的东西并支持IE，而不使用一些JS来明确定义每个浮动元素的宽度。

另请注意，您必须为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 */