Странное поведение float в IE7

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

<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

Можно ли это зафиксировать?

Ответ 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>

Ответ 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>

Ответ 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());
        });
    }

Ответ 4

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

Ответ 5

В последнее время нужно знать, что элементы с плавающей точкой должны быть добавлены вместе с 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>

Ответ 6

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