Inhaltsbereich

Aktuelles zu »Little Boxes«

Sie sehen einen Beitrag in der Einzelansicht (mit Kommentaren).

Zeige alle Beiträge

Kapitel 14.9: Clearfix-Methode aktualisiert

Einer der meist gelesenen Abschnitte aus der Online-Version von "Little Boxes 1" ist Kapitel 14.9 zu Clearfix. Das im Buch abgedruckte Original aus dem Jahre 2004 nimmt noch Rücksicht auf den IE5/Mac, der inzwischen eine ähnliche Verbreitung hat wie der ca. 1690 ausgestorbene Dodo. Deshalb habe ich die Online-Version jetzt aktualisiert und vereinfacht.

Webdesigner wie Jeff Starr oder Andy Ford haben sich der Clearfix-Methode angenommen und sie soweit entrümpelt, dass insbesondere der zweite Teil mit den Patches zu den Internet Explorern etwas einfacher wird.

Insgesamt sieht die Clearfix-Methode ohne Unterstützung des IE5/Mac jetzt so aus:

/* Der Kern von Clearfix */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

/* IE-Patch für IE 7*/
*:first-child+html .clearfix { min-height: 0; }

/* IE-Patch für IE 6*/
* html .clearfix { height: 1%; }

Zu den IE-Patches gibt es noch einige Alternativen wie zoom: 1, die ich in "Teil 2: Patches für diverse Internet Explorer" noch etwas näher erläutert habe. Die Beispieldatei in der Online-Version wurde aktualisiert.

24.01.2010 von Peter Müller

Zurück

Kommentare

Kommentar von makcie | 08.02.2010

Die Aktualisierung der Clearfix-Methode vereinfacht die Patches für die IE 6 und 7. Für den IE 6 wird nach wie der Patch * html .clearfix { height: 1%; } verwendet. Da der IE 7 den Sternchen-Hack * html nicht versteht, ist ein zweiter Patch notwendig: *:first-child+html .clearfix { min-height: 0; }

Noch einfacher ist es, wenn man auf die Inline-Patches verzichtet und die notwendigen Angaben in einen Conditional Comment einfügt: Der spezielle Patch für den IE 7 mit dem etwas seltsamen Selektor *:first-child+html wird dann nicht mehr benötigt. Es genügt e i n Patch für die IE 7 und 6 (und diesen Patch versteht sogar der uralte IE 5.5/Win):

<!--[if lte IE 7]>
<style type="text/css">
  .clearfix { height: 1%; }   /* oder { zoom: 1; } */
</style>
<![endif]-->

Beim Testen des Beispiels sollte für div.galerie width: 500px auskommentiert werden, weil sonst das Testergebnis für die IE verfälscht wird.

Um einen Kommentar zu schreiben, füllen Sie bitte alle Felder aus: