如何处理IE7没有正确确定浮动项目的宽度？ [英] How to deal with IE7 not determining the width of floated items correctly?

问题描述

在我的项目中，我经常使用浮动元素。这一切都很好，直到IE7参与，开始捣蛋事。取此代码，例如：

Frequently in my projects, I use floated elements. This all plays pretty nicely until IE7 gets involved and starts mucking things up. Take this code, for example:

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-新队。我发现这是IE7的结果，不确定浮动元素基于其内容的任何宽度，并假设一个（或两个）它们的宽度等于容器div的宽度。我通常找到的最快的解决方案是为IE7设置一个元素的宽度。

In a lot of cases, IE7 will drop #element-2 down to a new line. I've found that this is the result of IE7 not determining any width for the floated elements based on their content, and assuming that one (or both) of them has a width equal to that of the container div. The quickest solution I usually find to this is to set a width on that element for IE7.

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

This problem is a bit sporadic as it doesn't happen every time I use floated elements, but it does happen fairly frequently. It seems to be a lot more common when I use concatenated floats like:

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

Is there a better way to get IE to recognize the widths of the floated elements?

推荐答案

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

It's generally just good practice to use defined widths on floated elements.

这篇关于如何处理IE7没有正确确定浮动项目的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！