Zurück zum Blog

HTML Inline-Blöcke in Internet Explorer & Co

Heute möchte ich kurz die korrekte Verwendung von HTML Inline-Blöcken vorstellen, insbesondere im Internet Explorer 7 und anderen älteren Browsern.

Was sind Inline-Blöcke überhaupt?

HTML Inline-Blöcke sind nicht anderes, als "inline" dargestellte Elemente, die also z.B. innerhalb eines Texts vorkommen können, ohne das sie dabei automatisch einen Umbruch erzeugen. Normalerweise wirken sich auf Inline-Elemente Werte wie z.B. Margin und Padding nicht aus - auf Inline-Block-Elemente hingegen schon! Und das ist der kleine aber feine Unterschied zu den ursprünglichen Inline-Elementen.

Wie es so oft ist, funktionieren gewisse Dinge im Internet Explorer nicht. In diesem Fall im Internet Explorer 7 und 6. Da in unserem Web-Projekten vor allem der IE7 bei den Browser-Optimierungen leider noch immer einen Rolle spielt, ist es erforderlich, Inline-Block-Elemente korrekt darstellen zu können. Dafür sind 2 weitere Zeilen CSS-Code notwendig. Eine weitere Zeile sorgt zudem für die richtige Anwendung in Mozilla Firefox 2.

.nav li {
  display: inline-block;
  display: -moz-inline-stack; /* Für Mozilla Firefox 2 */
  width: 170px;  
  margin: 5px;
  padding: 3px;
  zoom: 1; /* Für IE7 und darunter */ 
  *display: inline; /* Für IE7 und darunter */
 }
Beispiel für die Verwendung von Inline-Block

Zur Anwendung kommt dabei ein kleiner CSS-Hack, der jedoch eine große Auswirkung auf den Internet Explorer hat.

Diesen Artikel teilen

Schreiben Sie den ersten Kommentar zu diesem Artikel

Ihr Kommentar

Bitte geben Sie Ihren Namen an
Bitte geben Sie eine E-Mail Adresse an
Bitte geben Sie eine Nachricht ein
Das Ergebnis ist nicht korrekt