display: inline-block; Internet Explorer

Die CSS-Eigenschaft display: inline-block; wird im Internet Explorer 6 und im Internet Explorer 7 eigentlich nicht unterstützt, aber mit einem kleinen Trick lässt sich diese Eigenschaft trotzdem darstellen.

View Code HTML5
<div class="inline_block">Diese beiden Blöcke sind nebeneinander angeordnet...</div>
<div class="inline_block">...und haben trotzdem eine feste Breite.</div>
View Code CSS
/* Neue Browser */
div.inline_block { display: inline-block; width: 200px; border: 1px solid #000; padding: 3px; }
 
/* IE 6 und 7 */
div.inline_block { display: inline; zoom: 1; }

Im IE 6 und IE 7 wird die Eigenschaft display einfach wieder zurück auf inline gesetzt und anschließend die Eigenschaft zoom hinzugefügt. Damit wird der Internet Explorer dazu gezwungen die Microsoft-proprietäre Eigenschaft hasLayout für dieses Element auf true zu setzten. Was an dieser Stelle genau passiert ist an dieser Stelle zu kompliziert zum beschreiben, jedenfalls erzielt es den selben Effekt wie display: inline-block; in neueren Browsern. Wer mehr über hasLayout erfahren möchte, sollte sich den Artikel On having Layout zu Gemüte führen.

Eine funktionierende Demo zum obigen Beispiel gibt es natürlich auch.

Firebug für den IE6 (IE Developer Toolbar)

Ja, der Internet Explorer 6 hat einen Firebug: die IE Developer Toolbar. Die Toolbar weißt zwar nicht mal ansatzweise die Funktionsvielfalt auf wie man sie vom Firebug gewöhnt ist, sie ist aber trotzdem manchmal hilfreich.
Ihr könnt das Tool hier runterladen.

Hier die wichtigsten Features:

  • DOM untersuchen
  • Anzeige der CSS-Eigenschaften
  • Outline für Container-Elemente anzeigen
  • Linear
  • Validierung von HTML und CSS
  • Cookies und Cache für Webseite löschen
  • Bilder und JS ausschalten
  • Color Picker
  • und noch weitere Kleinigkeiten

Das wichtigste fehlt leider: Die CSS-Eigenschaften lassen sich nicht live bearbeiten.

Die Toolbar lässt sich nach der Installation – und einem Neustart des Explorers – über Ansicht > Explorer-Leiste > IE Developer Toolbar aufrufen. Erwartet aber nicht zu viel…
Bitte beachten: Die IE Developer Toolbar ist nur mit dem Internet Explorer 6 und 7 kompatibel. Der IE 8 bietet dieses Feature bereits von Haus aus.

Dieser Artikel soll euch jetzt aber nicht dazu auffordern sämtliche Websites für den IE6 zu optimieren. Der Browser ist mehr als veraltet und wird daher auch kaum noch genutzt (weniger als 5% der Nutzer). Je weniger Websites diese Version des Internet Explorers unterstützen desto schneller fällt die Optimierung dieses „Höllenbrowsers“ komplett weg.

Internet Explorer 6 auf Spoon.net

Vor etwa einem Jahr habe ich schon einmal einen Artikel geschrieben, wie man zum Testen diverser Webanwendungen den Internet Explorer 6 als Standalone wieder zum Laufen bekommt. Inzwischen gibt es aber eine neue und viel bessere Lösung. Unter Spoon.net kann der IE6 bequem aus einem anderen Browser heraus gestartet werden und das ganz ohne Installation (und natürlich kostenlos). Dazu wird lediglich ein Plugin benötigt und schon kann der IE6 gestartet werden.

Der IE6 ist allerdings nicht der einzige Browser, der auf Spoon.net zur Verfügung steht. Weitere Browser sind z.B. IE7 – 9, Firefox 2 – 4, Chrome, Safari und Opera. Aus meiner Sicht das perfekte Tool zur Crossbrowser-Optimierung und daher ein fetter Linktipp von mir.

Hinweis: Spoon.net läuft derzeit nur unter Windows. Eine Mac-Version ist aber bereits in Planung.