Как предотвратить расширение плавающего родителя с плавающими дочерними элементами до 100% ширины в IE6?

У меня есть левый плавающий div с двумя рядами левых плавающих дочерних блоков. Каждая строка очищается простым блоком очистки.

Проблема в том, что IE6 расширяет ширину родительского блока до 100% доступного пространства, в то время как в других браузерах ширина родительского блока установлена ​​так, чтобы точно обертывать дочерние элементы.

Когда все дочерние блоки перемещаются, ширина в IE6 правильная. Но мне нужно, чтобы дочерние блоки располагались в ряды, поэтому я помещаю дополнительный чистый блок после каждой строки. После этого ширина родителя увеличивается до 100%.

Есть ли обходной путь, чтобы иметь нормальную ширину родительского блока в IE6? (столы не приветствуются)

Взгляните на изображение, иллюстрирующее проблему

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <style type='text/css'>
        #parent {
            float: left;
            background-color: black;
        }

        .block {
            width: 30px;
            height: 30px;
            background-color: yellow;
            margin: 10px;     
            float: left;
        }

        .clear {
            height: 1px;
            clear: both;
            font-size: 1px;
            line-height: 0px;
        }
    </style>
</head>

<body>
    <div id="parent">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>

        <div class="clear"></div>

        <div class="block">5</div>
        <div class="block">6</div>
        <div class="block">7</div>
        <div class="block">8</div>

        <div class="clear"></div>
    </div>
</body>

css css-float internet-explorer-6
person xtx    schedule 02.11.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня нет доступа к IE6, поэтому я не могу это проверить. Но вы можете попробовать следующее:

http://jsfiddle.net/YA7CN/

(помещая блоки в контейнер с прозрачным: оба)

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

person Yisela    schedule 02.11.2011