IE8 - Контейнер с верхним краем:10px не имеет поля

Question

Редактировать:Это происходит только в IE8, это прекрасно работает в IE7, Firefox, Opera и т. Д

Прежде всего, вот картинка, которую я сделал в photoshop, чтобы продемонстрировать свою проблему: 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

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

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

Answer 4

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

Answer 5

enter code hereПопробуйте использовать контейнер шириной с overflow:, скрытый вокруг плавающих элементов, и удалите очищенный элемент 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 6

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

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

Answer 7

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