Eine der bizarrsten Statistiken über Browser ist, dass Internet Explorer -Versionen 6, 7 und 8 koexistieren. In diesem Artikel machen Internet Explorer -Versionen insgesamt etwa 65% des Marktanteils aus. In der Website -Entwicklungsgemeinschaft ist diese Zahl viel kleiner und Statistiken zeigen, dass sie nur etwa 40%beträgt.
Der interessantere Teil dieser Statistiken ist, dass die Werte zwischen IE6, IE7 und IE8 sehr nahe sind, was verhindert, dass ein einzelner Microsoft -Browser das Gegenteil der Vergangenheit dominiert. Nach diesen bedauerlichen Statistiken müssen Entwickler bei der Entwicklung von Websites für Kunden umfassende Tests aller derzeit verwendeten IE -Browser durchführen, und dies wird auch mehr Benutzer für persönliche Projekte anziehen.
Dank dieser JavaScript-Bibliotheken (Frameworks) ist das Cross-Browser-JavaScript-Test so nahezu perfekt wie die aktuelle Situation. Dies ist jedoch bei der CSS -Entwicklung nicht der Fall, insbesondere die drei Versionen, die derzeit in IE sind.
Dieser Artikel versucht, für verschiedene Entwickler eine detaillierte und benutzerfreundliche Referenz bereitzustellen, die die Unterstützung von CSS für IE6, IE7 und IE8 verstehen möchten. Diese Referenz enthält eine Übersicht und Kompatibilität der folgenden Situationen:
A. Einer der drei Browser unterstützt Einträge, aber die anderen beiden nicht.
B. Zwei der drei Browser unterstützen den Eintrag, der andere jedoch nicht unterstützt.
In diesem Artikel wird nicht erörtert:
A. Einträge, die von den drei Browsern nicht unterstützt werden
B. Private Attribute
Daher liegt der Schwerpunkt dieses Artikels auf dem Unterschied zwischen den drei Browsern und nicht auf den notwendigen Unterstützungsfehlern. Die Liste ist in die folgenden fünf Teile unterteilt:
1. Selektor und Erbschaft
2. Pseudoklassen und Pseudoelemente
3. Attributunterstützung
4. Andere Technologien
5. Wichtige Fehler und Inkompatibilitätsprobleme
1. Selektor und Erbschaft
A. Unterwählungswahlen
Beispiel
| Körper> p { Farbe: #ffff; } |
beschreiben
Der untergeordnete Selektor wählt alle direkten untergeordneten Elemente eines bestimmten übergeordneten Elements aus.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |
Käfer
Wenn in IE7 ein HTML -Kommentar zwischen dem übergeordneten Tag und dem Kinder -Tag besteht, funktioniert der Kinderwähler nicht.
B. Kette
Beispiel
| .class1.class2.class3 { Hintergrund: #ffff; } |
beschreiben
Die Kettenklasse wird verwendet, um ein HTML -Element mit mehreren Klassenerklärungen wie folgt zu senden:
| <div class = "class1 class2 class3"> <p> Inhalt hier. </p> </div> |
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |
Käfer
IE6 scheint diese Situation zu unterstützen, da sie mit der letzten Klasse in der Kette mit dem Element übereinstimmen kann, das die Klasse verwendet. Es begrenzt jedoch kein Element, das alle Klassen in der Kette verwendet.
C. Attributauswahl
Beispiel
| a [href] { Farbe: #0f0; } |
beschreiben
Mit diesem Selektor kann ein Element positioniert werden, solange es die Eigenschaften angegeben hat. Im obigen Beispiel werden alle A -Tags mit dem HREF -Attribut begrenzt, während ein Tags ohne das HREF -Attribut nicht begrenzt ist.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |
D. Annäherung an den Bruderwähler
Beispiel
| H1+P { Farbe: #f00; } |
beschreiben
Dieser Selektor lokalisiert die Geschwister -Tags, die nahe am angegebenen Element liegen. Das obige Beispiel begrenzt das P -Tag, muss jedoch der Bruder des H1 -Tags sein und muss direkt hinter dem H1 -Tag folgen. Zum Beispiel:
| <h1> Überschrift </h1> <p> Inhalt hier. </p> <p> Inhalt hier. </p> |
Im obigen Code funktioniert der CSS -Stil nur für die erste p. Weil es H1s Bruder ist und H1 sofort folgt. Der zweite P ist auch ein Bruder von H1, folgt aber nicht sofort H1.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |
Käfer
Wenn in IE7 ein HTML -Kommentar zwischen den Geschwistern besteht, ist der angrenzende Geschwisterauswahl ungültig.
E. gewöhnlicher Bruderwähler
Beispiel
| H1 ~ p { Farbe: #f00; } |
beschreiben
Dieser Selektor lokalisiert alle Geschwisterelemente nach einem bestimmten Element. Die Anwendung dieses Selektors auf das obige Beispiel funktioniert für beide P -Tags. Wenn ein P -Element vor H1 erscheint, wird dieses P -Element natürlich nicht übereinstimmt.
Unterstützung
| Dh6 nein Dh7 ja Dh8 ja |