Floaten mit CSS und IE7 löschen?

375
Craig Johnstone

Ich habe mir einen Tag lang den Kopf gestoßen, als ich versuchte, Floats und Clears in älteren Versionen von Internet Explorer richtig zum Laufen zu bringen. Ich habe zahlreiche Tutorials zur Verwendung von .clear: after trick usw. gelesen, kann aber nichts zur Arbeit bringen!

Ich habe HTML so:

<div id="section"> <h2>Section Title</h2>  <label for="name">Name</label> <input type="text" id="name" />  <label for="dob">Date of Birth</label> <input type="text" id="dob" />  <label for="email">Email</label> <input type="text" id="email" /> </div>

Und CSS so:

#section  #label #input

In modernen Browsern, zB Opera 25, wird Folgendes angezeigt:

Name [Name field] Date of birth [Date of birth field] Email [Email]

In älteren Versionen von Internet Explorer (6 oder 7) wird Folgendes angezeigt:

Name [Name field] [Date of birth field] [Email field] Date of birth E-mail

Ich möchte mein HTML nicht anpassen. Kann mir jemand mit einem CSS-Update helfen?

-3
Ich würde das HTML ändern. Ich meine, um des willen Dave vor 9 Jahren 0
Vielen Dank, ich weiß, dass ich dies beheben kann, indem Sie zusätzliche DIVs in das HTML-Dokument einfügen. Ich möchte dies jedoch unbedingt vermeiden, es sei denn, es gibt keine andere Option. Craig Johnstone vor 9 Jahren 0
Dies ist eine Frage für stackoverflow.com, und Sie haben dort ein Konto. Sacha K vor 9 Jahren 2
@CraigJohnstone: Hast du die Chance bekommen, den Code aus meiner Antwort zu testen? Ich bin mir ziemlich sicher, dass dies der einzige Weg ist, um das zu tun, was Sie fragen. Floating-Elemente werden in IE 6/7 nicht korrekt behandelt, weshalb diese Problemumgehungen erforderlich sind. Auch meine Lösung hat den Vorteil, dass alle Browser außer IE6 und IE7 die Problemumgehung ignorieren. James P vor 9 Jahren 0
@SachaK, danke - ich stimme völlig zu. Ich bin nicht sicher, wie das bei einem Superuser gelandet ist. Ich habe bis jetzt noch nicht von Superuser gehört und dachte, ich würde * auf Stackoverflow posten, bis ich Ihren Kommentar bemerkte und die URL überprüfte. Craig Johnstone vor 9 Jahren 0

1 Antwort auf die Frage

0
James P

Was Sie versuchen zu tun, ist eine schlechte Idee, da sich erstens niemand so viel Mühe geben sollte, um IE6 in einer neuen Webanwendung zu unterstützen, und zweitens ist Ihre HTML-Struktur nicht flexibel und funktioniert nur in einem bestimmten Szenario.

Ich war jedoch neugierig, ob die klassischen IE6-Float-Bugs nur mit CSS und ohne zusätzliches HTML-Code überwunden werden können, und es scheint überraschend möglich zu sein. Der Trick besteht darin, die CSS-Ausdrücke des IE zu verwenden, um nach den Textfeldern Elemente in die Seite einzufügen.

Bei der Emulation von IE6 und IE7 funktionierte der folgende Code in IETester für mich:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #section  label input{ float: left; margin-bottom: 10px;  *zoom: expression(this.runtimeStyle.zoom="1",  this.parentNode.insertBefore(document.createElement("br"), this.nextSibling).style.cssText="clear:both;font:0/0 serif"); } </style> </head> <body> <div id="section"> <h2>Section Title</h2>  <label for="name">Name</label> <input type="text" id="name" />   <label for="dob">Date of Birth</label> <input type="text" id="dob" />   <label for="email">Email</label> <input type="text" id="email" />  </div> </body> </html>

Basierend auf Informationen von dieser Seite

Danke - diese Lösung hat gut funktioniert. Das Problem lässt sich nicht ganz ohne zusätzliche Markierungen lösen (da das CSS einen BR hinzufügt), aber ich kann keine andere Möglichkeit dafür finden - also denke ich, dass dies die einzige Lösung ist. Prost. Craig Johnstone vor 9 Jahren 0

Verwandte Probleme