Странное поведение с плавающей точкой в ​​IE7

Question

Я хочу создать простое поле со строкой заголовка, содержащей заголовок и несколько кнопок инструментов. У меня есть следующая разметка:

<div style="float:left">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; width: 200px; background-color: red;">content</div>
</div>

Это прекрасно в Firefox и Chrome:

http://www.boplicity.nl/images/firefox.jpg

Однако IE7 полностью запутался и поместил правильный всплывающий элемент в правую часть страницы:

http://www.boplicity.nl/images/ie7.jpg

Можно ли это исправить?

Answer 1

Укажите ширину в самом внешнем div. Если эта ширина в вашем div контента означает, что это общая ширина вашего бокса, просто добавьте ее к внешнему div и (необязательно) удалите его из контента, например:

<div style="float:left; width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>

Answer 2

Это просто быстрый ответ, поэтому я поднимаю руки, если это не совсем работает. Я думаю, что решение Марко, вероятно, будет работать, если вы просто добавите минимальную ширину, а не ширину. Если вы также пытаетесь обслуживать ie6, вам может понадобиться взломать, так как минимальная ширина не поддерживается ie6 и его потомками.

Так что это должно работать с IE7 и другими современными браузерами. Установите минимальную ширину для того, что подходит.

<div style="float:left; min-width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>

Answer 3

Я исправил это с помощью jQuery, чтобы эмулировать поведение браузеров, отличных от IE:

    // IE fix for div widths - size header to width of content
    if (!$.support.cssFloat) {
        $("div:has(.boxheader) > table").each(function () {
                $(this).parent().width($(this).width());
        });
    }

Answer 4

Недавно узнал, что правильные плавающие элементы должны быть добавлены с div перед другими элементами. Это самое простое исправление без добавления строки изменений.

<div style="background-color:blue; padding: 1px; height: 20px;">
    <div style="float: right; background-color:green;">title</div>
    <div style="float: left; background-color:yellow;">toolbar</div>
</div>

Answer 5

Попробуйте поместить position:relative; в родительский элемент и дочерний элемент. Это решило проблему для меня.

Answer 6

Сделайте это <div style="background-color:blue; padding: 1px; height: 20px;> родителем двух плавающих div'ов также clear:all