BlogHouse

Heute ist mir ein Fehler in FF3 in Verbindung mit der “clearfix” Methode aufgefallen. Eine Methode zum clearen von Float Elementen ohne zusätzliches Markup. Beschrieben in Big Johns Artikel “How To Clear Floats Without Structural Markup”.
Eine deutsche übersetzung dieses Tutorials gibt es hier.

Normalerweise stellt der Browser DIV Element ohne Größenangaben in der maximal möglichen Breite da.
Nutzt man im FF3 die beschriebene Methode zum clearen von Float-Elementen, wird das äußere Div nur so breit aufgezogen wie es nötig ist um alle Inhalte darzustellen.
Der CSS Code

<style type="text/css">clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Diese Angabe benötigt der Safari-Browser zwingend !! */
.clearfix { display: block; }

/* for IE-mac */
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
</style>

Das Ergebnis im Firefox 3

Man sieht sehr gut das die blau umrahmte Box nicht die Breite der ganzen Seite beansprucht.

Der selbe Code im Firefox 2

Hier wird die Box auf die volle Breite gezogen. genau so wie man es erwartet.

UPDATE:

Mittlerweile habe ich heraus gefunden dass es sich um keinen Fehler handelt, sondern an folgender Zeile liegt.
display: inline-block;
Der Firefox 3 interpretiert das Attribut inline-block laut Spezifikation.
Da hierbei der Block selbst als Inline Element behandelt wird, dehnt er sich nur so weit aus wie der Inhalt es benötigt. Also ein völlig korrektes Verhalten. Aber mal ehrlich, wer von euch wusste auswendig was dieses Attribut bewirken soll?

Tags: CSS, Browser, Firefox, Web