IE8 - контейнер с margin-top: 10px не имеет поля

Question

РЕДАКТИРОВАТЬ: Это происходит только в IE8, он отлично работает в IE7, Firefox, Opera и т. Д.

Прежде всего, вот фотография, которую я сделал в фотошопе, чтобы продемонстрировать мою проблему: http://richardknop.com/pict.jpg

Теперь вы должны иметь представление о моей проблеме. Вот упрощенная версия разметки, которую я использую (я пропустил самый нерелевантный контент):

<div class="left">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="right">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="clear"></div>
<div class="box">
    //
    // NOW THIS BOX HAS NO TOP MARGIN
    //
</div>
<div class="box">
    // box content
</div>

И стили CSS выглядят так:

.clear {
    clear: both;
}
.left {
    float: left;
}
.right {
    float: right;
}
.box {
    overflow: auto;
    margin-top: 10px;
}

Очевидно, я пропустил все несоответствующие стили, такие как границы, цвета фона и изображения, размеры шрифтов и т. Д. У меня остались только важные вещи.

Есть идеи, где может быть проблема?

Answer 1

Проверьте, работает ли padding-top: 10px. Возможно, поле пытается перейти из верхней части страницы.

Answer 2

Я думаю, что это ошибка IE8. Относится к элементу родного элемента плавающего левого и правого div. С очищающим div или без него конечный незакрепленный элемент теряет свое верхнее поле в IE8.

Мы проверили это, и только IE8 ошибается:

http://www.inventpartners.com/content/ie8_margin_top_bug

Мы также предложили 3 решения.

Answer 3

У меня похожие проблемы, и решения, предоставленные Мэттом Брэдли, не сработали для меня (но все равно спасибо за публикацию!). Я хотел иметь margin-top: 10px для элемента h1.

Решением, которое я придумал, было добавление позиции: относительная, верхняя: 10px и margin-top: 0px к элементу h1.

Answer 4

enter code here Попробуйте использовать контейнер шириной с переполнением: скрытый вокруг плавающих элементов div и удалите очищенный элемент div.

    <div id="container">
        <div class="left">    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
        <div class="right">    
            <div class="box">        // box content right    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
    </div>
    <div class="box">    //    // NOW THIS BOX HAS NO TOP MARGIN    //</div>
<div class="box">    // box content</div>

И CSS

#container { width: 100%; overflow: hidden; }

(извините, я оставил IE7 на своей рабочей машине для тестирования, поэтому не могу проверить)

Answer 5

Я не совсем понимаю такой подход. Вы можете обернуть <div> с классом вправо и влево в другой <div> и применить к нему overflow: hidden, width: 100%, чтобы элементы ниже плавающих элементов отображались правильно.

Answer 6

Попробуйте закрыть свой чистый div.

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

Answer 7

У меня нет IE8 со мной ... но вы пытались добавить clear: и в нижний div, и в добавление нижнего поля в один из верхних float? Я почти уверен, что достиг бы того же эффекта без каких-либо дополнительных div.