☰

Floats mit CSS und IE7 löschen?

tag-icon • tag-icon internet-explorer html css internet-explorer-7
Floats mit CSS und IE7 löschen?

Ich zerbreche mir schon seit einem Tag den Kopf darüber, wie Floats und Clears in älteren Versionen von Internet Explorer richtig funktionieren. Ich habe zahlreiche Tutorials zur Verwendung des .clear:after-Tricks usw. gelesen, aber ich bekomme einfach nichts davon zum Laufen!

Ich habe HTML wie dieses:

<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 wie folgt:

#section {border:solid 2px #b7ddf2; background:#ebf4fb; margin-top: 20px;}
#label{clear: left; float: left; width: 300px; margin-left: 20px; margin-bottom: 10px;}
#input{float: left; margin-bottom: 10px;}

In modernen Browsern, z. B. Opera 25, wird es wie folgt angezeigt:

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

In älteren Versionen von Internet Explorer (6 oder 7) wird es folgendermaßen 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-Fix helfen?

Antwort1

Was Sie versuchen, ist eine schlechte Idee, denn erstens sollte sich niemand so viel Mühe geben, IE6 in einer neuen Webanwendung zu unterstützen, und zweitens ist Ihre HTML-Struktur nicht flexibel und wird nur in ganz bestimmten Szenarien funktionieren.

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

Der folgende Code hat bei mir in IETester beim Emulieren von IE6 und IE7 funktioniert:

<!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 {border:solid 2px #b7ddf2; background:#ebf4fb; margin-top: 20px; display: block; zoom: 1}
            label{clear: left; float: left; width: 300px; margin-left: 20px; margin-bottom: 10px;}
            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 vondiese Seite

verwandte Informationen