IE8 - Container mit margin-top: 10px hat keinen Spielraum

Question

EDIT: Dies geschieht nur in IE8, es funktioniert in IE7, Firefox, Opera etc.

Vor allem hier ist ein Bild, das ich in Photoshop gemacht habe, mein Problem zu demonstrieren: http: // richardknop. com / pict.jpg

Jetzt sollten Sie Idee über mein Problem. Hier ist eine vereinfachte Version von Markup Ich verwende (ich gelassen die meisten irrelevant Inhalt):

<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>

Und CSS-Stile gehen wie folgt aus:

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

Natürlich habe ich weggelassen alle irreevant Stile wie Rahmen, Hintergrundfarben und -bilder, Schriftgrößen usw. ich nur von wichtigen Sachen gehalten haben.

Jede Idee, wo könnte das Problem sein?

Answer 1

Sehen Sie, wenn padding-top: 10px funktioniert. Es könnte sein, dass der Marge von der Spitze der Seite zu gehen versucht.

Answer 2

Ich denke, das ein IE8 Bug. Bezieht sich auf ein Geschwisterelement eines schwebte linken und rechten div. Mit oder ohne Clearing div, verliert das letzte unfloated Element seinen oberen Rand in IE8.

Wir haben das getestet und nur IE8 bekommt es falsch:

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

Wir kamen auch mit drei Lösungen auf.

Answer 3

Versuchen Sie, klare div schließen.

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

Answer 4

ich nicht ganz diesen Ansatz erhalten. Sie könnten die <div>s mit Klasse rechts und links in einem anderen <div> wickeln und anzuwenden overflow: hidden, width: 100% es so, dass die Elemente unten fließende Elemente korrekt angezeigt bekommen.

Answer 5

enter code hereTry einen Behälter mit einer Breite mit Überlauf: ein. Um die schwammen divs versteckt, und entfernen Sie die gelöscht 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>

Und die CSS

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

(sorry, ich links IE7 auf meiner Arbeit Maschine zum Testen, damit ich nicht überprüfen kann)

Answer 6

Ich habe ähnliche Probleme, und das von Matt Bradley angebotenen Lösungen nicht für mich arbeiten (aber Dank für es trotzdem Posting!). Ich wollte margin-top haben: 10px auf einem h1-Elemente.

Die Lösung kam ich mit war von Position Zugabe: relative, top: 10px und margin-top: 0px auf das h1-Element.

Answer 7

Ich habe IE8 nicht mit mir ... aber haben Sie versucht, das Hinzufügen klar: beide auf den Boden div und das Hinzufügen eines unteren Rand zu einer der Top-Schwimmer? Ich bin mir ziemlich sicher, dass die gleiche Wirkung ohne zusätzliche divs erreichen würde.