Internet Explorer & CSS

Wer sich intensiver mit CSS beschäftigt, kennt die Situation nur allzu gut: In allen Browsern sieht das Layout aus wie gewünscht – nur nicht im Internet Explorer. Der Internet Explorer ist das Problemkind bei der Entwicklung von CSS-Layouts, wobei er der am häufigsten verwendete Browser ist und bleibt (z.Z. IE6 ~ 70%, IE7 ~ 12% und IE5 ~ 4% nach der Statistik von www.webhits.de). Deshalb möchte ich nachfolgend Infos zusammenstellen, die bei Abweichungen im Layout beim IE hilfreich sein könnten.

Konditionale Kommentare für Internet Explorer:

If-Block wird nur für IE ausgeführt:

<!--[if IE]>
...
<![endif]-->

If-Block für eine bestimmte Version des IE (z.B. 6 oder 7):

<!--[if IE 6]>
...
<![endif]-->

CSS-Anweisungen nur für IE (* html-Selektor):

* html .list ul { height: 0px; }
  html > body .list ul { overflow: auto; }

Darstellungsmodi im IE: Quirks & Standard:
Bei fehlender oder unvollständiger Dokumenttyp-Deklaration wechselt der Internet Explorer 6 und 7 in den Quirksmodus – Webseitendarstellung wie bei Internet Explorer der 5.x Generation.

Eine Abfrage des Modus ist mit JavaScript möglich:

<script type="text/javascript">
alert(document.compatMode);
</script>

Im Standardmodus wird “CSS1compat” ausgegeben, im Quirksmodus “BackCompat“.

Bei Problemen mit IE könnte die Internet Explorer Developer Toolbar hilfreich sein. Für die Arbeit mit CSS ist der Dominspector besonderes praktisch, Sie blenden ihn über ViewDom ein. So lässt sich auch feststellen, ob ein Element Layout hat oder nicht. Hat es Layout, so erscheint hier hasLayout: -1. Bei einem Element ohne Layout steht hingegen hasLayout: 0. Zum Thema hasLayout sehen Sie den Artikel Über hasLayout.

Links zu weiterführenden Informationen:
Explorer Exposed! – Demos einiger IE-Bugs
CSS tests and experiments by Bruno Fassino

Quelle: Auszüge aus dem Artikel “CSS-Problemkind” in Internet Professionell, Juni-Ausgabe S. 46 ff.