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?
- Hast du einen DOCTYPE gesetzt (z.B. sind Sie in IE8-standards-Modus? oder Macken?)
- Ja, habe ich: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- Ich habe nicht geschaut bei deinem problem im detail, aber Frage mich, ob es sein könnte, verursacht durch die Ränder Zuklappen z.B. andybudd.com/archives/2003/11/no_margin_for_error
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sehen, wenn
padding-top: 10px
funktioniert. Es könnte sein, dass die Marge versucht, gehen von der Spitze der Seite.
auf die clear-div. Ich erinnere mich, es war ein bug in einer früheren version, die benötigten Inhalte wie diese.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.
Schließen Sie Ihre klare div.
clear
Klasse der div-box wird immer noch klar etwas vor.Ich weiß nicht Recht bekommen diesen Ansatz. Sie wickeln konnte der
<div>
s-Klasse rechts und Links in einer anderen<div>
und geltenoverflow: hidden
,width: 100%
es so, dass die Elemente unterhalb der gefloateten Elemente bekommen wird korrekt angezeigt.enter code here
Versuchen Sie es mit einem container mit einer Breite mit overflow:hidden um die gefloateten divs, und entfernen Sie die gelöscht div.Und CSS -
(sorry, verließ ich den IE7 auf meinem Arbeits-Rechner zum testen, so kann ich nicht überprüfen)
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.
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.