Saubere CSS-Update von IE7 ist 'float: right' drop bug

Einführung

Ihrem Titel angibt, ein Wunsch sehen, ein Update für die float: right drop Fehler, aber dein text impliziert etwas breiteren Anwendungsbereich Wunsch zu sehen, Lösungen für "Probleme mit Elementen schwebte direkt im IE7." Es gibt viele Allgemeine Probleme mit gefloateten Elementen (right oder left) im browser. Auch wenn man die Frage, ob die Unterstützung des IE7 browser ist verdient viel Aufmerksamkeit, nicht mehr, es wird zweifellos auch so bleiben für einige Leute für einige Zeit. Daher werde ich die Gelegenheit nutzen, hier zu Adresse zahlreiche Probleme auf einmal in Bezug schwimmt im browser. Beachten Sie, dass viele Experimente und Referenzen unten kommen aus eine hervorragende Ressource: http://www.brunildo.org/test/index.html.

CSS für das Element Enthalten

Für die Eltern, um die gefloateten-element die folgende css festgelegt werden sollte:

.container {
    overflow: auto; /* forces clearing of the child float */
    zoom: 1; /* give it layout (this can be some other css that does likewise) */
}

Sicherstellen, dass es hasLayout ist wichtig, um zu verhindern, dass Arten von margin-und padding-Fehler, eine Art von peek-a-boo bug, und damit die overflow zu löschen. Für eine Folge von Schwimmern, einige html können müssen ändern, wenn padding auf den container gewünscht wird, um richtig zu arbeiten.

Im Hinblick auf eine "drop" - Ausgabe mit einem float: right, möchten Sie vielleicht, um zu vermeiden, eine explizite height oder max-height auf dem Behälter. Ein min-height ist okay. Einstellung einer height ist und dann mit der float höher sein als der container macht IE7 nicht Verhalten mit folgenden Elementen. Es ist keine Reine css-Lösung, die ich gefunden habe, erwähnt.

Wenn der container selbst position: absolute kann es zu Problemen mit der Positionierung des Schwimmers, die erfordern möglicherweise, dass der Schwimmer selbst festgelegt werden, um position: absolute anstatt schwebte.

Referenzen:

• Für overflow zu löschen -- http://www.quirksmode.org/css/clearing.html
• Margen -- http://www.brunildo.org/test/IEFloatAndMargins.html
• Peek-a-boo -- http://www.brunildo.org/test/iew_boo.html und http://www.brunildo.org/test/iew_boo3.html
• Float-Sequenz Polsterung -- http://www.brunildo.org/test/IEmfloa.html
• Vermeidung height -- http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/, http://www.brunildo.org/test/fenc7.html (und seine ähnliches problem link auf dieser Seite).
• Container ist absolute -- Floating Zu Weit Rechts!

CSS für das Kind Schwebte

Für das schwebte Kind-element die css (neben float: right) zu setzen, hängt von zwei Dingen:

Absolute-Container

Wieder, wie oben erwähnt, eine mit Eltern, die absolute erfordern eine änderung in, wie das Kind behandelt wird.

Float ist Auch eine Clearing-Element

Wenn die float ist auch gehen, um eine clear drauf ist, dann gibt es zahlreiche Probleme, die entstehen können, je nachdem, ganz und gar auf die html und css der Elemente um ihn herum. Es gibt nicht eine einzige kanonische fix, also sehen Sie in den Referenzen unten.

Referenzen:

• Container ist absolute -- Floating Zu Weit Rechts!
• Auch clear -- http://www.brunildo.org/test/IEWfc.html, http://www.brunildo.org/test/IEWfc2.html, http://www.brunildo.org/test/IEWfc3.html

CSS für die Untergeordneten Elemente des Containers, Bevor der Schwimmer

Wenn die float: right folgt ein element in der html Struktur, die sollte auf der linken Seite (und nicht darüber), dann wird die vorhergehende element(s) muss float: left.

CSS für die Untergeordneten Elemente des Containers Nach dem Float -

Ein Klares Element

Für ein element nach die float hat clear set, dann, wenn es padding und background-color sicher, dass es auch hasLayout zu vermeiden, eine Verdoppelung der padding; ist auch dieser verhindert, dass zusätzlicher Raum oberhalb der clear durch container padding, und vermeidet andere margin Probleme.

Referenzen:

• Für padding -- http://www.brunildo.org/test/IEClearPadding.html und http://www.brunildo.org/test/IEFloatClearPadding.html
• Für margins -- http://www.brunildo.org/test/Op7_margins_float.html (schauen Sie unten auf der Seite für IE7)

Einen Absatz, Bevor Sie ein Element Löschen

Dass ein Absatz mit einer margin-bottom und kürzer in der Höhe als die float befindet sich zwischen dem Schwebekörper und einem clearing-element, können für eine zusätzliche Lücke zwischen den clear und die float gleich, dass margin. Es ist nicht bekannt, reinen css-fix andere als das, was dem Absatz eine null am unteren Rand (die möglicherweise nicht akzeptabel, wenn der Absatz kann gehen, größer als der Schwimmer).

Referenz:

• Absatz -- http://www.brunildo.org/test/IEFloatClearMargin.html

Abschluss

Kann ich nicht garantieren, ich habe angesprochen, jedes Problem, das auftreten kann, mit einem rechts gefloateten Objekt, aber sicherlich viele wichtigsten sind abgedeckt. Wie auf "warum" diese Dinge passieren, es ist alles", dass die Bugs` im IE7.

Haben wir bereits mit der clearfix-Lösung seit Jahren.

.cf:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.cf { display: inline-block; }
html[xmlns] .cf { display: block; }
* html .cf { height: 1%; }

Dies ist eine einfache CSS-Klasse, die, im Idealfall, die angewendet werden, um einen container, der hat jedes Kind float-Elemente. Da bist du über restriktive ändert nichts an der HTML-überhaupt sind, können Sie entweder:

1. ersetzen Sie alle vorkommen von .cf mit Ihrem eigenen div-Selektor [oder]
2. verwenden JS anwenden der Klasse (die ist schlecht, weil die Benutzer sehen, eine gebrochene layout ein paar Sekunden, bis die Seite vollständig geladen ist) [oder]
3. PHP ob_start() + regex anwenden der Klasse [oder]
4. gehen Sie einfach vintage und schreiben alles mit Tabellen (wie wir früher zu tun, in der `der 90er Jahre)

Ich weiß, es ist ein Jahr gewesen, seit dieses geschrieben wurde, aber ich habe eine Lösung gefunden, die ich gerne für diese. Der Kern wird unter Verwendung von 'Ausdruck' - tag in der CSS für den IE7 nur zu bewegen sich die Schwebekörper werden das erste element des übergeordneten Element in der DOM. Es werden semantisch korrekt für alle anderen Browser, aber für IE7 ändern wir die DOM, um Bewegung der Schwebekörper.

In meinem Fall habe ich:

<div>
    <h1></h1>...<p>any other content...</p>
    <small class="pull-right"></small>
</div>

In meinem CSS für die pull-richtig, ich verwende:

.pull-right {
    float:right;
    *zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}

Das Ergebnis ist, dass IE7 bewegt meine <small> zu werden das erste element der <div> aber alle anderen Browser lassen Sie das markup alleine.

Dies funktioniert möglicherweise nicht für alle. Technisch, es ist die änderung von markup, sondern nur in der DOM für IE7 und es ist auch eine javascript-Lösung.

Auch, ich verstehe es kann einige performance-Probleme mit Ausdruck, (es wird langsam), so ist es vielleicht nicht ideal, es gibt eine Menge von Wagen wie diesem. In meinem Fall war es gut und erlaubt mir, um semantisch korrektes HTML.