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

EDIT: Das passiert nur im IE8, funktioniert es im IE7, Firefox, Opera etc

Erste von allen, hier ist ein Bild habe ich in photoshop gemacht, um zu demonstrieren, dass mein problem: http://richardknop.com/pict.jpg

Nun sollten Sie haben Ahnung von meinem Problem. Hier ist eine vereinfachte version des markup, die ich verwende (habe ich aus den meisten irrelevante Inhalte):

<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, die gehen so:

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

Natürlich habe ich Links alle irreevant Stile, wie Rahmen, Hintergrundfarben und-Bilder, schriftart, Größen etc. Ich habe nur die wichtigen Sachen.

Irgendeine Idee, wo das problem sein könnte?

InformationsquelleAutor Richard Knop | 2009-08-07
  1. 9

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

    • Ich kann padding-top: 10px; denn die Boxen schon haben, hintergrund-Farbe, und Sie haben bereits padding: 10px, so dass der Inhalt in Ihnen sieht besser aus.
    • Versuchen Sie, ein Füllstoff wie &nbsp; auf die clear-div. Ich erinnere mich, es war ein bug in einer früheren version, die benötigten Inhalte wie diese.
    • Hinzufügen von &nbsp; das problem gelöst 🙂 ich hatte auch hinzufügen von height: 0; der .klar, Klasse.
    • .clear { clear: both; overflow: hidden; }
    • sollten Sie diesen post als Antwort. Dies ist die wahre Lösung plus der Höhe:0; überlauf:versteckt;. +1
    • komisch, das funktioniert! +1

    InformationsquelleAutor Justin
  2. 6

    Ich denke, dies ist ein IE8-bug. Bezieht sich auf ein gleichrangiges element einer schwebte Links und rechts, div. Mit oder ohne clearing-div, der Letzte unfloated element verliert seine top-Marge im IE8.

    Haben wir getestet, und nur der IE8 wird es falsch:

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

    Kamen wir auch mit 3 Lösungen.

    • Gute Untersuchung. Das schwierige Thema ist eingestürzte Ränder mit clearing-innen. Alle 3 top-Margen, die nicht floatenden divs sind zusammengebrochen in Ihrem Beispiel, so dass der Obere Rand des Dritten ist nicht verloren; es brach mit der ersten. W/o clear-Eigenschaft, IE8 das Verhalten ist definitiv richtig, und anderen Browsern Zustimmen. Was die Zugabe von clear-Eigenschaft tun sollten, ist nicht klar. Check-out Opera Verhalten. BTW, müssen Sie nicht zwei Schwimmer für Ihre Vorführung.
    • Interessant. Ich hatte nicht gedacht das so. IE8 ist eindeutig viel strenger auf Marge Zusammenbruch als gecko. Ich habe schon vorher geschrieben, über eine andere Marge Zusammenbruch Problem mit display: table-in gecko, der gerendert wird besser (anders) im IE8 vermute ich, dass es durchaus ein paar mehr von diesen margin-collapse Inkonsistenzen werden stolpern, HTML-Entwickler in den kommenden Monaten!
    • Hi buti-oxa - ich habe eine Fußnote zu meinem Artikel über Ihre Analyse des Problems. Hoffe, das ist ok. Lassen Sie mich wissen, wenn Sie wollen, mich zu ändern, es überhaupt nicht.
    • Sieht gut aus. Sie sind auf jeden Fall zu Recht auf MC weiterhin wird eine PITA in der Zukunft.
    InformationsquelleAutor
  3. 1

    Schließen Sie Ihre klare div.

    <div class="clear"></div>
    • Das ist ein Problem, aber nicht das Problem. Hinzufügen der clear Klasse der div-box wird immer noch klar etwas vor.
    • Ich habe nur vergessen, es zu schließen, dann ist es geschlossen in den source-code. Ich bearbeitet meine post.
    InformationsquelleAutor idrumgood
  4. 1

    Ich weiß nicht Recht bekommen diesen Ansatz. Sie wickeln konnte der <div>s-Klasse rechts und Links in einer anderen <div> und gelten overflow: hidden, width: 100% es so, dass die Elemente unterhalb der gefloateten Elemente bekommen wird korrekt angezeigt.

    • Ja, aber ich bevorzuge minimalem markup und verwenden nur so viele divs, die absolut notwendig sind. Dieser möchte nur hinzufügen, ein anderes element ohne semantische Bedeutung, das ist auch gar nicht notwendig für das styling.
    • Ich würde sagen, dass <div class="clear">&nbsp;</div> ist genau das gleiche. Und ich persönlich würde wählen Sie die überlauf-Lösung, da der HTML sieht besser aus. Aber das ist mir.
    InformationsquelleAutor dalizard
  5. 1

    enter code hereVersuchen Sie es mit einem container mit einer Breite mit overflow:hidden um die gefloateten divs, 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 CSS -

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

    (sorry, verließ ich den IE7 auf meinem Arbeits-Rechner zum testen, so kann ich nicht überprüfen)

    • und hinzufügen von overflow: hidden und es wird funktionieren 🙂
    • richtig, nur erwischte mich dabei, dass!
    InformationsquelleAutor ScottE
  6. 1

    Habe ich ähnliche Probleme, und die Lösungen, die von Matt Bradley funktionierte nicht für mich (aber vielen Dank für Entsendung es sowieso!). Ich wollte margin-top:10px auf ein h1-element.

    Die Lösung, die ich kam, war durch hinzufügen von position:relative , top:10px und margin-top:0px zu den h1-element.

    InformationsquelleAutor bluesun
  7. 0

    Habe ich nicht den IE8 mit mir... aber haben Sie versucht, hinzufügen von clear: both für den unteren div-Element und hinzufügen eines unteren Rand auf eine der oben schwimmt? Ich bin mir ziemlich sicher, das würde den gleichen Effekt erzielen, ohne zusätzliche divs.

    InformationsquelleAutor kmiyashiro
Schreibe einen Kommentar