CSS-Artikel: CSS im Internet Explorer 7

von Michael Stöckel

In der Version 7 des Browsers von Microsoft wurde laut eigener Aussage einige Verbesserung im Bereich der Cascading Style Sheets-Unterstützung eingebaut. Fehler wurden beseitigt, Unterstützung für neue Kommandos/Attribute eingebaut und die Interpretation von CSS-Konzepten (z. B. Boxmodell) verbessert. Es ist ein offenes Geheimis, dass sich der Internet Explorer am weitesten entfernt von den Webstandards bewegt. Insofern ist es für einen Webprogrammierer sinnvoll und nützlich, über die CSS-Unterstützung in diesem Browser Bescheid zu wissen. Neben den Änderungen bei den eigentlichen CSS-Befehlen beschreibt dieser Artikel die bedeutensten Verbesserungen und Veränderungen im Internet Explorer 7 im Vergleich zur Vorgängerversion.

CSS-Selektoren  

Attributabhängige Selektoren

Der IE 7 unterstützt das "Angebot" von CSS 2.0, das CSS-Kommandos für HTML-Elemente definiert werden können, die ein bestimmtes Attribut besitzen oder deren Attribut einen bestimmten Wert zugewiesen haben.
In der Vorgängerversion wurde keine Variante dieser Art von Selektoren unterstützt.

Folgende Möglichkeiten interpretiert der IE 7 neu:

CSS-Kommando	Bedeutung
h1[align]	Überschrift h1 mit Attribut align
h1[align=center]	Überschrift h1 mit Attribut align und Wert center
h1[align~=cen]	Überschrift h1 mit Attribut align welches den Wert "cen" enthält
h1[lang|=en]	Überschrift h1 mit Attribut lang dessen Wert beginnt mit en

Verschachtelte Selektoren

Im IE7 ist die Unterstützung für den Kindselektor und den Nachbarselektor hinzugekommen. Beispiel für Kindselektor:

div > h1 {color: red;}

Allen Überschriften h1, die sich eine Ebene unter dem div befinden, werden die Schriftfarbe rot zugewiesen.

Beispiel für Nachbarselektor:

h1 + p {font-style:italic;}

Dem Textabsatz p wird, wenn er direkt nach einer Überschrift kommt, eine kursive Schriftart zugewiesen.

Mehrere Klassen für einen Selektor

Nur im Strict-Modus können für einen Selektor (= HTML-Element) im IE 7 mehrere CSS-Klassen vergeben werden. Bisher konnten zwar auch mehrere Klassen angegeben werden, allerdings wurde in diesem Fall nur die letzte Klasse interpretiert. Beispiel:

h1.Klasse1.Klasse2 {CSS-Kommando(s);}

Fehler mit * html-Selektor

Das html-Element ist das Grundelement einer Webseite. Das bedeutet, dass es dazu in der Baumstruktur kein "höherwertiges Element" gibt.
Dennoch kann mit CSS ein Selektor definiert werden, der das html-Element als Kindelement anderer HTML-Elemente betrachtet. Da es so ein Element nicht gibt, sollte eigentlich kein Browser etwas Passendes dafür finden. Beim Internet Explorer ist das allerdings schon der Fall. Beispiel:

* html {CSS-Befehl1; CSS-Befehl2; ...}

Im Strict-Modus des IE7 ist dieser Bug beseitigt. Im Quirksmodus funktioniert er aber noch.

Hinweis: Viele Webseiten nutzen diesen Bug, um CSS-Befehle speziell für den Internet Explorer zu definieren. Im IE 7 kann dieser Bug im Strict-Modus nicht mehr genutzt werden.

CSS-Pseudoklassen  

Klasse :first-child

Der IE 7 interpretiert im Gegensatz zur Version 6 zusätzlich die Pseudoklasse :first-child. Beispiel:

div h1:first-child {text-decoration:underline;}

Wenn die Überschrift h1 das erste Element innerhalb des div-Bereiches ist, wird sie unterstrichen dargestellt.

Klasse :hover

Der Hover-Effekt konnte bis zum IE 6 nur bei Ankern mit CSS realisiert werden. Im IE 7 kann :hover auf alle HTML-Elemente angewendet werden.

CSS-Kommandos  

Darstellung von Rahmen

Im Vergleich zur Version 6 des IE's werden bei der Eigenschaft border-style die Rahmenarten dotted (gepunkteter Rahmen) und dashed (gestrichelter Rahmen) richtig interpretiert. Zuvor wurde bei einer Rahmenbreite von 1 Pixel bei einer dotted-Definition der Rahmen im dashed-Stil dargestellt.

Positionierung von Elementen

Im diesen Rahmen sind beim IE 7 die CSS-Eigenschaften max-height, max-width, min-height und min-width hinzugekommen. Dabei werden numerische und prozentuale Angaben vom Browser interpretiert.

Der Wert visible für die CSS-Eigenschaft overflow wird korrekt nach dem CSS-Standard intepretiert.

Für die Eigenschaft position wird jetzt der mögliche Wert fixed interpretiert. Dies funktioniert allerdings nur im standardkonformen HTML-Modus (Dokumententyp-Deklaration).

Interpretation von abbr

Bis einschließlich dem Internet Explorer 6 hat der Browser für das Tag <abbr> keine CSS-Definitionen interpretiert. Diese Einschränkung wurde ebenfalls in der neuen Version behoben.

Alpha-Kanal bei png-Bildern  

Obwohl es noch nicht reibungslos läuft, unterstützt der IE7 den Alpha-Kanal für Bilder im png-Format. Dies führt zur verbesserten Darstellung der Bilder im Browserfenster, womit gleichzeitig auch CSS-Eigenschaften leichter für diese Bilder definiert/genutzt werden können.

Wichtiger Fehler im CSS-Boxmodell  

Für das bekannte Boxmodell wurde ein bedeutender Fehler im IE 7 beseitigt. Falls bei der Anwendung des Boxmodells das innere HTML-Element inkl. Rahmen größer ist als der Außenrahmen wurde dieser immer der Größe des inneren Elementes angepasst, so dass dieses nie außerhalb des Außenrahmens angezeigt wurde.

Im IE7 wird die Breite und die Höhe für den Außenrahmen berücksichtigt, so dass beide Elemente jetzt mit ihren "wahren" Angaben dargestellt werden.

« zurück

weiter »