IE und CSS - oder warum ich conditional comments liebe
Als Webdesigner zu Arbeiten ist richtig toll. Man hat die möglichkeit sich so richtig kreativ auszutoben. Man hat heutzutage von HTML5 und CSS3 die möglichkeiten den wunderschönsten technischen Schnick Schnack einzubauen und eine richtig geile Seite aufzubauen..... währe da nicht ein kleines Problem:
Deine Seiten können noch so toll aussehen oder das beste Interface haben, wenn sie nicht im IE funktionieren sind sie für eine Firma wertlos.
Gottseidank weis das IE Team das ihr Browser nicht immer klar kommt, deshalb haben sie uns Webentwickler ein tolles Feature gegeben:
Die handhabung ist eigentlich relativ simple:
Einfach ein Komentar im HTML schreiben der wie folgt aussieht:
<!--[if IE]>
Hier sden IE spezifischen Code eintragen
<![endif]-->
Schon wird der IE angewiesen diesen Code mit auszuführen. Dies klappt mit allen IE Versionen ab Version 5.
Es gibt aber auch noch eine andere Schreibweise, die es erlaubt Code für eine spezielle IE Version auszuführen:
<!--[if IE 6]>
Hier den IE spezifischen Code eintragen
<![endif]-->
oder aber auch diesen, der alle Versionen des IE's anspricht die unter Version 6 sind
<!--[if IE lt 6]>
Hier den IE spezifischen Code eintragen
<![endif]-->
oder auch diesen der alle IE Versionen unter Version 6 einschließlich Version 6 auswählt
<!--[if IE lte 6]>
Hier den IE spezifischen Code eintragen
<![endif]-->
Schon hat man eine einfache Möglichkeit das Stylesheet für den IE anzupassen.
Dabei kann man sich einige Trivias über den IE zu eigen machen:
Es gibt 2 Modi im IE: Der quirks modus und den normalen Modus.
Beim Quirks Modus hat der IE ein gestörtes Boxen Modell, paddings erweitern die Box nicht und Margins kollabieren nicht.
margin: 0 auto; zentriert den Container nicht, abhilfe schafft text-align: center im Parent Container
Images, insbesondere PNGs mit einem separaten Alpha Kanal sind nicht transparent. Abhilfe: Pallette der Bilder auf 255 Farben Reduzieren und als GIF konvertieren.
Text-Shadow ist nicht vorhanden. Abhilfe:
filter:DropShadow(color=#000000, offx=1, offy=1);
Ist nicht das Ware, aber wenigstens hat man nen rudimentären Schatten
Der Border wird nicht auserhalb des Containers gezeichnet, sondern Innerhalb. Resultat:
Der Border bildet einen zusätzlichen Padding.
Das waren meine Beobachtungen soweit, ich hoffe ich konnte den Einen oder Anderen damit Helfen.