Ich habe ständig Probleme mit Elementen, die in IE7 schweben.
Ich habe viele Stack-Overflow-Fragen gelesen, die ähnlich wie diese sind, aber es scheint keine durchgängig sauberen CSS-Antworten zu geben.
Was ich damit meine ist, dass ich Antworten sehen möchte, die NICHT den HTML-Code ändern . ZB:
Ich verstehe, dass das floated-Element manchmal nicht für seine Elternhöhe verantwortlich ist und es daher manchmal nicht richtig enthält. Gelegentlich finde ich mich selbst zu einem Element mit Zoom: 1, das es manchmal behebt. Manchmal finde ich mich in einem bedingten IE7 Style-Sheet herum, was meiner Meinung nach nicht die beste Lösung ist.
Hinweis: Was ich unter "Layout" verstehe - Ссылка
Ich habe auch andere Antworten gelesen, die mit relativer und absoluter Positionierung zu tun haben (Elternteil und Kindteil). Dies zieht es hoch, beeinflusst aber oft umgebende Divs.
Ich würde gerne ein Kopfgeld zu dieser Frage hinzufügen, wenn jemand ausführlich erklären kann, warum dies passiert und eine detaillierte Diskussion der verschiedenen Fixes, IDEAL CSS ONLY!
Vielen Dank!
BEARBEITEN
Das häufigste Problem, auf das ich stoße, ist, wenn ich so etwas habe:
Linke Seitenleiste - Haupt - Rechte Seitenleiste
Das Recht wird oft fallen, wenn es schwebt. Idealerweise sollte dies im Format Left - Right - Main sein, aber ich finde, dass ich immer wieder Styling-Entwickler arbeite (vor allem Drupal), wo dies der Fall ist und es zu mühsam ist, sie dazu zu bringen, ihre Arbeit zu ändern. Sinn ergeben? Weil ich die Entwicklung von Entwicklern arbeite, setzen sie nie den klaren Block ein (was persönlich meiner Meinung nach sowieso schrecklich und schmutzig ist!)
Ihr Titel weist auf den Wunsch hin, eine Korrektur für den float: right -Fehler zu finden, aber Ihr Text impliziert einen breiteren Anwendungsbereich, um Lösungen für "Probleme mit Elementen in IE7 zu finden". Es gibt viele allgemeine Probleme mit floated-Elementen ( right oder left ) in diesem Browser. Auch wenn man bezweifeln mag, dass die Unterstützung des IE7-Browsers mehr Aufmerksamkeit verdient, wird es für einige Leute sicherlich noch einige Zeit bleiben. Daher werde ich hier die Gelegenheit nutzen, um zahlreiche Probleme in Bezug auf Floats in diesem Browser sofort anzusprechen. Beachten Sie, dass viele Experimente und Referenzen unten von einer ausgezeichneten Quelle stammen: Ссылка .
Für ein übergeordnetes übergeordnetes Element sollte das folgende css gesetzt werden:
%Vor% Stellen Sie sicher, dass hayLayout wichtig ist, um Arten von Rand- und Auffüllfehlern zu verhindern, eine Art von Peek-a-Boo-Bug und das Löschen von overflow . Für eine Folge von Gleitkommazahlen muss HTML möglicherweise geändert werden, wenn padding auf dem Container ordnungsgemäß funktionieren soll.
In Bezug auf ein Drop-Problem mit float: right möchten Sie möglicherweise vermeiden, eine explizite height oder max-height für den Container festzulegen. A min-height ist in Ordnung. Wenn Sie height setzen und dann float höher als der Container ist, verhält sich IE7 nicht mit den folgenden Elementen. Es gibt keine reine CSS-Lösung, die ich festgestellt habe.
Wenn der Container selbst position: absolute ist, kann es bei der Positionierung eines Floats zu Problemen kommen, dass Float selbst auf position: absolute gesetzt werden muss, anstatt floated zu werden.
Referenzen:
overflow zu löschen - Ссылка
height - Ссылка , Ссылка (und sein ähnlicher Problem Link auf dieser Seite). absolute - Floating zu weit rechts!
Bei einem floated child-Element hängt die zu setzende CSS (neben float: right ) von zwei Dingen ab:
Absoluter Container
Wie bereits erwähnt, kann ein übergeordnetes übergeordnetes Element, das absolute ist, eine Änderung der Behandlung des untergeordneten Elements erfordern.
Float ist auch ein Clearing-Element
Wenn für float auch clear festgelegt ist, können zahlreiche Probleme auftreten, die vollständig von html und css der umgebenden Elemente abhängen. Es gibt keine einzige kanonische Lösung, schauen Sie sich die folgenden Referenzen an.
Referenzen:
absolute - Floating zu weit rechts!
clear - Ссылка , Ссылка , Ссылка
Wenn das float: right auf ein Element in der html -Struktur folgt, das sich links von ihm befindet (und nicht darüber), dann muss dieses vorhergehende Element float: left sein.
Ein klares Element
Für ein Element nach das float , das clear gesetzt hat, wenn es padding und background-color hat, vergewissern Sie sich, dass es auch LAYOUT hat vermeiden Sie eine Verdoppelung der padding ; dies verhindert auch zusätzlichen Speicherplatz über dem clear aufgrund des Containers padding und vermeidet andere margin Probleme.
Referenzen:
Ein Absatz vor einem Löschelement
Wenn Sie einen Absatz mit einem margin-bottom und einer kürzeren Höhe als das float zwischen dem floated-Element und einem Clearingelement haben, kann eine zusätzliche Lücke zwischen clear und float gleich diesem% entstehen. Code%. Es ist kein reiner CSS-Fix bekannt, außer dem Absatz einen Null-unteren Rand zu geben (was möglicherweise nicht akzeptabel ist, wenn der Absatz höher als der Float werden kann).
Referenz:
Ich kann nicht garantieren, dass ich jedes Problem behandelt habe, das bei einem richtigen Floating-Objekt auftreten könnte, aber sicherlich sind viele wichtige davon abgedeckt. Was "warum" diese Dinge passieren, ist alles "Bugginess" in IE7.
Haben Sie versucht, die Clearfix-Lösung zu verwenden, um divs zu kollabieren? Es gibt Variationen zu dieser und es gibt eine neuere Version, aber ich habe nicht die URL zur Hand, aber das ist Standard-Clearfix CSS, die Sie zum übergeordneten Element hinzufügen, das kollabiert und Probleme mit floated-Elementen verursacht Ссылка . Chris Coyer hat hier eine bessere Version Ссылка .
Sie sagen "Ich verstehe, dass das floated-Element manchmal die Höhe seiner Eltern nicht berücksichtigt und daher manchmal nicht korrekt enthält". Dies ist richtig, das Elternelement wird kollabieren, wenn alle untergeordneten Elemente schweben. Dies liegt daran, dass die Elemente aus dem normalen Fluss entfernt werden, wenn dies der Fall ist, kann das Eltern-Div seine Höhe nicht berechnen und kollabiert, als ob nichts innerhalb des Div vorhanden wäre.
Aber ohne die Seite und das Problem zu sehen, kann ich nur abschätzen, dass das Problem auf IE6-IE7s haslayout -Eigenschaft zurückzuführen ist, die wirklich nervig ist, sie haben es von Version 8 aufwärts sortiert, aber es fügt zusätzliche Entwicklungszeit hinzu dein Build.
Aber in den meisten Situationen ist die Clearfix-Lösung am besten, da sie der Seite kein zusätzliches Markup hinzufügt, wie etwa
%Vor%das ist alt und veraltet und sollte vermieden werden.
Ich hoffe, das hilft Ihnen, wenn Sie weitere Informationen benötigen oder ich die Frage nicht beantwortet habe, fragen Sie einfach.
Wir setzen die clearfix-Lösung seit Jahren ein.
%Vor%Dies ist eine einfache CSS-Klasse, die idealerweise auf einen Container angewendet werden muss, der über untergeordnete Float-Elemente verfügt. Da Sie restriktiv sind, den HTML-Code überhaupt nicht zu ändern, können Sie entweder:
.cf durch den Selektor deines eigenen DIVs [oder] ob_start() + Regex, um die Klasse [oder] Ich weiß, dass es ein Jahr her ist, seit es veröffentlicht wurde, aber ich habe eine Lösung gefunden, die mir dafür gefällt. Das GIS verwendet das Expression-Tag in Ihrem CSS für IE7, nur um das floated-Element als erstes Element des Parent im DOM zu verschieben. Es wird für alle anderen Browser semantisch korrekt sein, aber für IE7 modifizieren wir das DOM, um das floated-Element zu verschieben.
In meinem Fall habe ich:
%Vor%In meinem CSS für Pull-rechts verwende ich:
%Vor% Das Ergebnis ist, dass IE7 mein <small> als erstes Element von <div> verschiebt, aber alle anderen Browser lassen das Markup alleine.
Dies funktioniert möglicherweise nicht für alle. Technisch ändert es das Markup, aber nur im DOM für IE7 und es ist auch eine Javascript-Lösung.
Ich verstehe auch, dass es mit dem Ausdruck einige Leistungsprobleme geben kann (es ist langsam), also ist es vielleicht nicht ideal, dass es so viele Floats gibt. In meinem Fall funktionierte es gut und erlaubte mir, semantisch korrektes HTML zu behalten.
Tags und Links internet-explorer css internet-explorer-7 css-float