IE7 Очистить плавающую проблему

Привет, это упрощенная версия моей проблемы с IE7. В основном элементы div, следующие за очищенным элементом div (зеленым), ведут себя не так, как ожидалось (в IE7). Он работает, как и ожидалось, в Safari, FF и т. д., а также в IE8.

Есть у кого какие советы по исправлению. Спасибо за любую помощь :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
    #wrap {width:600px;height:1000px;background:black;}
    .box {width:179px;height:180px; float:left; border-right:1px solid white;border-top:1px solid white;margin-right:20px;background:blue;}
    .clear{clear:left;}.small{height:100px}.xsmall{height:50px}.first{background:red;}.second{background:yellow;}.third{background:pink;}
    .fourth{background:green;}.fifth{background:aqua;}</style>
</head>
<body>
    <div id="wrap">
        <div class="box first"></div>
        <div class="box small second"></div>
        <div class="box xsmall third"></div>
        <div class="box clear fourth "></div>
        <div class="box fifth"></div>
        <div class="box sixth"></div>
    </div>
</body>
</html>

css internet-explorer css-float internet-explorer-7
person csbourne    schedule 29.07.2010    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ты сможешь...

А) вставьте прозрачный элемент «разделитель» между 3-м и 4-м, который будет выполнять четкие: оба, занимать высоту 1 пиксель, занимать всю ширину, а затем margin-top:-1px на 4, 5, 6, поэтому нет вертикального 1px промежуток между ними.

Б) используйте встроенный блок вместо поплавка, например: http://jsfiddle.net/gLcNm/16/

Это требует изменения разметки, чтобы между вашими блоками не было пробелов, И CSS-хак для IE, который изначально не выполняет встроенный блок без повторного объявления встроенного для уровней блоков.

C) сделать так, чтобы каждый из этих блоков div содержался в div "row":

<div class="row">
<box><box><box>
</div>

Затем сделайте row прозрачным, чтобы он содержал коробки.

person meder omuraliev    schedule 29.07.2010
comment
meder: Я не вижу, как ваш ответ B (применение display: inline-block вместо float: left to the box) помогает в этом случае. Четвертое поле в вашем jsfiddle переходит на новую строку, потому что элемент контейнера слишком узкий. Если я сделаю его шире, то поле останется в первой строке: jsfiddle.net/gLcNm/32 - person gvas; 06.09.2012