Direktnavigation

Bookmark and Share

Weitere Infos

Sie lesen gerade:

Little Boxes Teil 1 (Cover)

Leider ausverkauft.

Dafür gibt's jetzt:

Das große Little Boxes-Buch (Cover)

Inhaltsbereich

Teil 2: Patches für diverse Internet Explorer

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 (im Buch ab Seite 286).

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.