Eigenes CSS für den Internet Explorer mit Conditional Comments

Wer kennt das Problem nicht: Du erstellst ein wunderschönes, modernes CSS-Design, siehst es dir dann im Internet Explorer (IE) an und merkst, dass eigentlich nichts mehr passt. Firefox und Co. stellen dein Design allerdings perfekt dar. Die einfachste und schnellste Lösung für diese Problematik sind separate Styles die nur für die IE's gelten, was sich mit den sogenannten "Conidtional Comments" lösen lässt. Mit ihnen kann man HTML-Code browserabhängig beeinflussen. Die Schreibweise der "Conditional Comments" ist die gleiche wie die eines HTML-Kommentars (<!-- -->). Den IE's wurde speziell beigebracht, dass es sich hierbei um einen für sie relevanten Code handelt. Alle andere Browser sehen hier nur einen HTML-Kommentar und ignorieren den dahinter liegenden Code. Es gibt 6 verschiedene Arten von "Conditional Comments".

Folgendes wird von allen IE Versionen interpretiert

<!--[if IE]>

    <link href="ie.css" rel="stylesheet" type="text/css" />

<![endif]-->

Nur für die angegebene Version 7

<!--[if IE 7]>

    <link href="ie7.css" rel="stylesheet" type="text/css" />

<![endif]-->

Für die Versionen 7 und neuer

<!--[if gte IE 7]>

    <style type="text/css">

        div { padding-left: 10px; }

    </style>

<![endif]-->

Nur für Versionen neuer als 7

<!--[if gt IE 7]>

    <style type="text/css">

        div { margin-right: 10px; }

    </style>

<![endif]-->

Für Versionen 7 und älter

<!--[if lte IE 7]>

    <div>Nur im IE sichtbar</div>

<![endif]-->

Nur für Versionen älter als 7

<!--[if lt IE 7]>

    <p>Wird nur im IE 6 und älter ausgegeben.</p>

<![endif]-->

Um sich's leichter merken zu können, kann man die Conditional Comments auch aussprechen. "if gte IE 7" zum Beispiel steht für "wenn größer-gleich IE 7". Hier die Übersetzungen für die restlichen Abkürzungen.

• gt - greater than - größer als: >
• gte - greater than equals - größer gleich: >=
• lt - lower than - kleiner als: <
• lte - lower than equals - kleiner gleich: <=

Wie Ihr seht lässt sich auf diese Weise ein zusätzlicher CSS-Stylesheet einbinden, der nur von den IE's interpretiert wird. Dies wird üblicherweise nach der ursprünglichen CSS-Datei erledigt. Somit müssen in der IE.css nur mehr die Regeln überschrieben und korrigiert werden, die im IE ein falsches Layout verursachen. Es bleibt noch anzumerken, dass die Conditional Comments nicht auf Stylesheets begrenzt sind. Sie können überall im HTML-Dokument verwendet werden, wodurch zum Beispiel ganze DIV-Boxen nur im IE ausgegeben werden können.

Chris