Как предотвратить расширение плавающего родителя с плавающими потомками до 100% в IE6? - PullRequest
Новая
       29

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

0 голосов
/ 02 ноября 2011

У меня есть левый плавающий элемент 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>

1 Ответ

0 голосов
/ 02 ноября 2011

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

http://jsfiddle.net/YA7CN/

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

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

...