Weitere Infos (Randbereich)
Das erste Mal hier?
|
|
|
Hier geht es um die Bücher und DVDs der "Little Boxes" Reihe:
Viel Spaß.
Inhaltsbereich
Nachrichten - Einzelansicht
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.
Kommentare
Kommentar von makcie | 2010-02-08
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 mit * aus: