Eine der bizarrsten Statistiken über Browser ist die Koexistenz der Internet Explorer-Versionen 6, 7 und 8. Zum Zeitpunkt dieses Artikels machen die Internet Explorer-Versionen zusammen etwa 65 % des Marktes aus. In der Website-Entwickler-Community ist diese Zahl viel geringer, Statistiken zeigen, dass sie nur etwa 40 % beträgt.

Das Interessante an dieser Statistik ist, dass die Zahlen für IE6, IE7 und IE8 sehr nahe beieinander liegen, was verhindert, dass ein einzelner Microsoft-Browser die Szene dominiert – das Gegenteil von dem, was in der Vergangenheit der Fall war. Basierend auf diesen bedauerlichen Statistiken ist es für Entwickler notwendig, alle derzeit verwendeten IE-Browser gründlich zu testen, wenn sie Websites für Kunden entwickeln, und dies kann auch mehr Benutzer für persönliche Projekte anziehen.

Dank JavaScript-Bibliotheken (Frameworks) sind browserübergreifende JavaScript-Tests nahezu perfekt, wie es die aktuelle Situation zulässt. Dies ist jedoch bei der CSS-Entwicklung nicht der Fall, insbesondere wenn es um die drei derzeit existierenden IE-Versionen geht.

Dieser Artikel versucht, eine detaillierte und benutzerfreundliche Referenz für verschiedene Entwickler bereitzustellen, die die CSS-Unterstützung für IE6, IE7 und IE8 verstehen möchten. Diese Referenz enthält eine Übersicht und Kompatibilität für die folgenden Situationen:

A. Elemente, die einer der drei Browser unterstützt, die anderen beiden jedoch nicht

B. Elemente, die zwei der drei Browser unterstützen, einer jedoch nicht

In diesem Artikel geht es nicht um Folgendes:

A. Elemente, die von den drei Browsern nicht unterstützt werden

B. Private Attribute

Daher konzentriert sich dieser Artikel auf die Unterschiede zwischen den drei Browsern und nicht auf die notwendigen Supportmängel. Die Liste ist in die folgenden fünf Abschnitte unterteilt:

1. Selektoren und Vererbung

2. Pseudoklassen und Pseudoelemente

3. Attributunterstützung

4. Verschiedene andere Technologien

5. Wichtige Fehler und Inkompatibilitätsprobleme

1. Selektoren und Vererbung

A. Unterselektor

Beispiel

Körper > p { Farbe: #fff; }

beschreiben

Der untergeordnete Selektor wählt alle direkten untergeordneten Elemente eines bestimmten übergeordneten Elements aus. Im obigen Beispiel ist body das übergeordnete Element und p das untergeordnete Element.

Supportstatus

IE6 Nr IE7 Ja IE8 Ja

Käfer

In IE7 funktionieren untergeordnete Selektoren nicht, wenn zwischen dem übergeordneten Tag und dem untergeordneten Tag ein HTML-Kommentar steht.

B. Kettentyp

Beispiel

.class1.class2.class3 { Hintergrund: #fff; }

beschreiben

Die Kettenklasse wird verwendet, um ein HTML-Element mit mehreren Klassendeklarationen zu senden, wie folgt:

Inhalt hier.

Supportstatus

IE6 Nr IE7 Ja IE8 Ja

Käfer

IE6 scheint diese Situation zu unterstützen, da es die letzte Klasse in der Kette dem Element zuordnen kann, das diese Klasse verwendet, es kann jedoch nicht die Verwendung aller Klassen in der Kette durch ein Element einschränken.

C. Attributauswahl

Beispiel

a[href] { Farbe: #0f0; }

beschreiben

Mit diesem Selektor kann ein Element lokalisiert werden, solange es über die angegebenen Attribute verfügt. Im obigen Beispiel werden alle a-Tags mit href-Attributen qualifiziert, während a-Tags ohne href-Attribute nicht qualifiziert werden.

Supportstatus

IE6 Nr IE7 Ja IE8 Ja

D. Geschwisterauswahl in der Nähe

Beispiel

h1+p { Farbe: #f00; }

beschreiben

Dieser Selektor sucht nach Geschwister-Tags neben dem angegebenen Element. Das obige Beispiel qualifiziert das p-Tag, es muss jedoch ein Geschwister des h1-Tags sein und direkt auf das h1-Tag folgen. Zum Beispiel:

Überschrift Inhalt hier. Inhalt hier.

Im obigen Code ist der CSS-Stil nur für das erste p wirksam. Weil es der Bruder von h1 ist und auf h1 folgt. Das zweite p ist ebenfalls ein Bruder von h1, folgt aber nicht unmittelbar auf h1.

Supportstatus

IE6 Nr IE7 Ja IE8 Ja

Käfer

In IE7 haben benachbarte Geschwisterselektoren keine Auswirkung, wenn zwischen Geschwistern ein HTML-Kommentar vorhanden ist.

E. Gewöhnlicher Geschwisterselektor

Beispiel

h1~p { Farbe: #f00; }

beschreiben

Dieser Selektor findet alle gleichgeordneten Elemente, die einem angegebenen Element folgen. Die Anwendung dieses Selektors auf das obige Beispiel gilt für beide p-Tags. Wenn es ein p-Element gibt, das vor h1 erscheint, wird dieses p-Element natürlich nicht abgeglichen.

Supportstatus

IE6 Nr IE7 Ja IE8 Ja