Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

Teil 2: Patches für diverse Internet Explorer

Update: Es gibt neue Clearfix-Varianten

Folgende Beiträge enthalten weitere Informationen bzw. Tipps zur Verwendung von Clearfix: 

Diese beiden Links ergänzen die Ausführungen auf dieser und den folgenden Seiten. für die Praxis sei der oben verlinkte Micro Clearfix Hack von Nicolas Gallagher empfohlen. 

Alle Internet Explorer bis inklusive Version 7 kennen das Pseudoelement :after nicht und ignorieren somit den in Teil 1 mühsam erstellten Style. Dafür haben diese Internet Explorer andere Eigenwilligkeiten, die aber in diesem Fall äußerst willkommen sind.

Hier zunächst noch einmal der zweite Teil des EasyClearing im Überblick:

01 /* für IE7 */
02 *:first-child+html .clearfix { min-height: 0; }
03
04 /* für IE6 */
05 * html .clearfix { height: 1%; }

Und hier der zweite Teil des EasyClearing im Detail:

  1. Der IE7 unter Windows lässt sich mir der Anweisung aus Zeile 2 dazu bringen, gefloatete Elemente einzuschließen. Der Selektor *:first-child+html .clearfix bewirkt, dass die Zeile nur vom IE7 gelesen wird und {min-height: 0; } gibt dem Element hasLayout.
  2. Für den IE6 gibt es in Zeile 5 einen Sternchen-Hack, der dem Element eine feste Höhe gibt und so für das Umschließen der Floats sorgt. Mehr zu dieser Zeile finden Sie am Ende des Kapitels.

Idealerweise werden diese beiden Patches ausgegliedert und mit einem Conditional Comment nur für IE serviert. Mehr zu Conditional Comments finden Sie im Kapitel über Patches.

Natürlich gibt es zahlreiche Varianten, von denen jede andere Vor- und Nachteile hat:

  • Einige Autoren bevorzugen zum Triggern von hasLayout die Eigenschaft zoom: 1, die nur der IE kennt, für den das ja gedacht ist. Vorteil: zoom hat definitiv keinerlei Auswirkungen auf das Layout, während das bei min-height und height zumindest theoretisch denkbar ist. Nachteil: Das Stylesheet validiert nicht mehr, da zoom nicht zum CSS Standard gehört.
  • Die Ultrakurzform der IE-Patches benutzt ebenfalls zoom und fasst Patches für IE6 und IE7 in einer Zeile zusammen: .clearfix { *zoom: 1;}. Ein Sternchen direkt vor einer Eigenschaft bewirkt, dass diese nur von IE6 und IE7 gelesen wird.
  • Eine weitere Möglichkeit ist es, auf die Inline-Patches zu verzichten und die notwendigen Angaben in ein spezielles Stylesheet für IEs zu schreiben, das per Conditional Comment ausgeliefert wird (im Kapitel über Patches erfahren Sie mehr über diese ominösen Conditional Comments). 

Alle diese Ausführungen sind aber wie gesagt optional. Einfach kopieren und einfügen geht auch.

Der Originalartikel zu EasyClearing auf Deutsch

Wenn Sie Lust haben, nehmen Sie sich ein bisschen Zeit und lesen die deutsche Übersetzung des Originalartikels von Holly und John von Onno K. Gent:

Auch wenn er bereits aus dem Jahre 2004 stammt, ist es immer noch eine interessante Lektüre.