Einführung
Ihr Titel deutet darauf hin, dass Sie sich eine Lösung für die float: right Drop-Bug, aber Ihr Text impliziert einen weiter gefassten Wunsch nach Lösungen für "Probleme mit Elementen, die im IE7 rechts schweben". Es gibt viele allgemeine Probleme mit schwebenden Elementen ( right ou left ) in diesem Browser. Auch wenn man sich fragen kann, ob die Unterstützung des IE7-Browsers noch viel Aufmerksamkeit verdient, so wird sie doch zweifellos für einige Leute noch einige Zeit lang bestehen bleiben. Deshalb möchte ich hier die Gelegenheit nutzen, um gleich mehrere Fragen zu Floats in diesem Browser anzusprechen. Beachten Sie, dass viele der folgenden Experimente und Verweise aus einer hervorragenden Quelle stammen: http://www.brunildo.org/test/index.html .
CSS für das enthaltende Element
Für ein übergeordnetes Element, das das schwebende Element enthält, sollte das folgende Css gesetzt werden:
.container {
overflow: auto; /* forces clearing of the child float */
zoom: 1; /* give it layout (this can be some other css that does likewise) */
}
Sicherzustellen, dass es hasLayout ist wichtig, um Arten von Margin und Padding Fehler zu verhindern, eine Art von peek-a-boo Bug, und damit die overflow zu löschen. Bei einer Folge von Schwebekörpern muss möglicherweise etwas html geändert werden, wenn padding auf dem Container ist erwünscht, um richtig zu funktionieren.
In Bezug auf ein "Tropfen"-Problem mit einem float: right können Sie es vermeiden, eine explizite height ou max-height auf dem Container. A min-height ist in Ordnung. Einstellung einer height und dann die float größer als der Container sein, führt dazu, dass der IE7 die folgenden Elemente nicht berücksichtigt. Es gibt keine reine css-Lösung, die ich gefunden habe, festgestellt.
Wenn der Container selbst position: absolute kann es Probleme mit der Positionierung eines Floats geben, die es erforderlich machen, dass der Float selbst auf position: absolute statt in der Schwebe zu sein.
Referenzen:
CSS für das schwebende Kind
Für ein schwebendes Kindelement ist die css (neben float: right ) zu setzen, hängt von zwei Dingen ab:
Absoluter Container
Auch hier gilt, wie oben erwähnt, dass ein enthaltender Elternteil, der absolute kann eine Änderung des Umgangs mit dem Kind erforderlich machen.
Float ist auch ein Clearing-Element
Wenn die float wird auch eine clear dann gibt es zahlreiche Probleme, die ganz von der jeweiligen Situation abhängen. html y css der sie umgebenden Elemente. Es gibt keine einzige kanonische Lösung, daher sollten Sie sich die nachstehenden Referenzen ansehen.
Referenzen:
CSS für Kindelemente des Containers vor dem Float
Wenn die float: right folgt auf ein Element in der html Struktur, die sich links davon (und nicht darüber) befinden sollte, dann muss das vorhergehende Element bzw. müssen die vorhergehenden Elemente float: left .
CSS für Kindelemente von Container nach dem Float
Ein klares Element
Für ein Element nach die float Das hat clear gesetzt, dann hat sie, wenn sie padding und background-color zu verwenden, stellen Sie sicher, dass es auchLayout hat, um eine Verdoppelung der padding ; auch dies verhindert zusätzlichen Raum über dem clear wegen des Containers padding und vermeidet andere margin Probleme.
Referenzen:
Ein Absatz vor einem eindeutigen Element
Ein Absatz mit einem margin-bottom und kürzer in der Höhe als die float die sich zwischen dem schwebenden Element und einem Clearing-Element befindet, kann eine zusätzliche Lücke zwischen dem clear und die float gleich dem margin . Es gibt keine bekannte reine CSS-Lösung, außer dem Absatz einen unteren Rand von Null zu geben (was möglicherweise nicht akzeptabel ist, wenn der Absatz höher als der float ist).
Referenz:
Schlussfolgerung
Ich kann nicht garantieren, dass ich alle Probleme angesprochen habe, die bei einem Objekt mit rechtem Schwebezustand auftreten können, aber sicherlich werden viele wichtige Probleme behandelt. Was "warum" diese Dinge passieren, ist es alle "Bugginess` in IE7.
