CSS: inline-block und der Internet Explorer

Auch im Jahre 2012 ärgert man sich noch mit so mancher Eigenart des Internet Explorers herum. Was andere Browser (Chrome, Safari, Firefox) schon lange können, muss man dem Internet Explorer wieder gesondert beibringen. Die Rede ist diesmal von der CSS-Eigenschaft display:inline-block. Eigentlich eine schöne Sache, um bspw. einem Inline-Container feste Abmessungen (Breite, Höhe) zuzuordnen. Doch der IE scheint diese Eigenschaft nicht zu unterstützen. Für ihn gibt es NUR display:inline oder NUR display:block, aber nicht beides “zusammen”. Bevor ich aber nun weiter über den IE herziehe, hier eine mögliche Lösung:

Die Definition als inline-Blockelement:

.inlineBlock {
  display: inline-block;
}

Sollte man um folgende Zeilen erweitern:

.inlineBlock {
  display: inline-block;

  /* für IE */
  zoom: 1;
  *display: inline;
}

Durch diese beiden Zeilen wird nun auch im IE ein Inline-Element als Block dargestellt. Nicht schön, aber selten!

Leave a Reply

Your email address will not be published. Required fields are marked *