Question

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

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

为什么宽度完全改变了浮动部分在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更好，但你不应该让他们猜测。明确你的意思。

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

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 */

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

3 个答案: