如何处理IE7不能正确确定浮动项的宽度？

Question

在我的项目中，我经常使用浮动元素。这一切都很不错，直到IE7介入并开始搞糟事情。以下面的代码为例：

<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设置该元素的宽度。

这个问题有点零散，因为不是每次我使用浮动元素时都会发生这种情况，但它确实经常发生。当我使用级联浮标时，它似乎要常见得多，例如：

<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识别浮动元素的宽度？

Answer 1

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

Answer 2

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