Как бороться с IE7, не определяя ширину плавающих элементов правильно?

Question

Часто в своих проектах я использую плавающие элементы.Это все играет очень хорошо, пока 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 распознавать ширину плавающих элементов?

Answer 1

Обычно хорошей практикой является использование определенной ширины для плавающих элементов.

Answer 2

IE6 и 7 требуют фиксированной ширины для плавающих элементов, я всегда использовал это таким образом, чтобы предотвратить возникновение проблем ...