div 中的左浮动在 IE7 中不起作用，但在 Firefox 和 IE8 中起作用
当我有三个都保留浮动的 div 时，我希望这些部分根据其中数据的长度来扩展或收缩。
例如，如果第一个地址很长，我希望第一个框展开并将第二个框推过去。在 Firefox 中它是这样做的，但在 Internet Explorer 中它需要一个宽度才能看起来正确。在 IE7 中，它根本不显示正确 - 每个 div 都有一个包含两列的表格，在 IE7 中，它显示第二列到页面的远端，而不是与第一列紧贴，尽管在第二列并在第一列上设置较小的宽度。我在母版页中指定了文档类型，并且尝试添加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 中这看起来很好。
When I have three divs that all have float left I want the sections to expand or contract based on how long the data inside them is.
For instance, if the 1st address is very long I want the 1st box to expand and push the 2nd one over. In Firefox it is doing this but in Internet Explorer it requires a width to look right. In IE7 it doesn't display right at all - each div has a table with two columns and in IE7 it shows the 2nd column way over to the far side of the page instead of snug with the 1st column despite setting align=left on the 2nd column and setting a small width on the 1st column. I have the doc type specified in the master page and I've tried adding clear:both with no luck.
Why does the width totally change how the float section is displayed in IE and how can I fix this? The page must look nice in 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>
I noticed that in IE8 this looks just fine.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
当您使用浮动元素时，您几乎应该始终包含显式宽度。
如果你不这样做，浏览器就必须猜测你的意思。在这种情况下，Firefox 的猜测比 IE 更好，但您不应该让他们猜测。尽可能明确。
编辑：如果您希望所有三个框随内容一起扩展，我建议设置基于百分比的宽度。一般来说，您需要查找流体列布局< /a>.
You should almost always include an explicit width when you're floating elements.
If you don't, browsers have to guess what you mean. In this case, Firefox is guessing better than IE, but you shouldn't make them guess. Be explicit where you can.
edit: If you want all three boxes to expand with the content, I'd suggest setting percentage-based widths. In general, you're going to want to look up techniques for fluid column layouts.
刚刚发现，如果您有一个浮动和一个清除应用到 DIV IE7 扼流圈。
相反，在 DIV 的 CSS 中指定浮动，但删除清除并在相关 DIV 之后放置一个空 div，如下所示：
BEFORE:
AFTER
Just discovered that if you have a float and a clear applied to a DIV IE7 chokes.
Instead, specify the float, in the DIV's CSS, but remove the clear and place an empty div, after the DIV in question, like this:
BEFORE:
AFTER
您是否考虑过使用
display:inline-block而不是浮动？我认为如果不使用一些 JS 显式定义每个浮动元素的宽度，你就不能用浮动做你想做的事并支持 IE。另请注意，您必须为 IE 中的块级元素声明第二个单独的规则：
HTML:
CSS：
Have you considered
display:inline-blockinstead of floating? I don't think you can do what you want with floats AND support IE without using some JS to explicitly define width on each floated element.Another note, you have to declare a second separate rule for block level elements in IE:
HTML:
CSS: