如何处理 IE7 无法正确确定浮动项目的宽度？答案

【问题标题】：How to deal with IE7 not determining the width of floated items correctly?如何处理 IE7 无法正确确定浮动项目的宽度？
【发布时间】：2012-03-03 06:29:51
【问题描述】：

在我的项目中，我经常使用浮动元素。在 IE7 参与进来并开始搞砸之前，这一切都很好。以这段代码为例：

HTML

<div id="container">
    <div id="element-1" class="left">
        Some content
    </div>
    <div id="element-2" class="right">
        Some much longer, more complicated content
    </div>
    <div class="clear"></div>
</div>

CSS

.left {
    display:block;
    float:left;
}
.right {
    display:block;
    float:right;
}
.clear {
    clear:both;
    visibility:hidden;
}

在很多情况下，IE7 会将#element-2 放到新的一行。我发现这是 IE7 没有根据浮动元素的内容确定任何宽度的结果，并假设其中一个（或两个）的宽度等于容器 div 的宽度。我通常找到的最快的解决方案是为 IE7 设置该元素的宽度。

这个问题有点零星，因为它不会在我每次使用浮动元素时发生，但它确实经常发生。当我使用连接的浮点数时，它似乎更常见：

HTML

<div id="container">
    <div id="element-1" class="left">
        Some content
    </div>
    <div id="element-2" class="right">
        <div class="left">
            Some much longer, more complicated content
        </div>
        <div class="right">
            Even more content
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>

CSS

同上。

有没有更好的方法让 IE 识别浮动元素的宽度？

【问题讨论】：

你能设置一个jsfiddle.net 演示来展示IE7中描述的问题吗？
对于.left 或.right，不需要display:block。浮动元素是隐式块级的；为显示设置的任何值都将被忽略（display:none 除外）。
.clear 不需要 visibility:hidden。默认情况下，空 div 在所有浏览器中的高度为零。

标签： css cross-browser css-float internet-explorer-7

【解决方案1】：

IE6 和 7 需要固定宽度的浮动元素，我一直这样使用它来防止问题发生...

【讨论】：

【解决方案2】：

在浮动元素上使用定义的宽度通常只是一个好习惯。

【讨论】：