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:
| <div class="class1 class2 class3"> <p>Inhalt hier.</p> </div> |
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:
| <h1>Überschrift</h1> <p>Inhalt hier.</p> <p>Inhalt hier.</p> |
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 |