Différences de CSS dans Internet Explorer 6, 7 et 8 (1)

L'une des statistiques les plus bizarres sur les navigateurs est que les versions Internet Explorer 6, 7 et 8 coexistent. À partir de cet article, les versions Internet Explorer représentent environ 65% de la part de marché au total. Dans la communauté du développement de sites Web, ce nombre est beaucoup plus petit et les statistiques montrent qu'elle n'est qu'environ 40%.

La partie la plus intéressante de ces statistiques est que les valeurs entre IE6, IE7 et IE8 sont très proches, ce qui empêche un seul navigateur Microsoft de dominer l'opposé du passé. Selon ces statistiques regrettables, il est nécessaire que les développeurs effectuent des tests complets de tous les navigateurs IE actuellement utilisés lors du développement de sites Web pour les clients, ce qui attirera également plus d'utilisateurs sur des projets personnels.

Grâce à ces bibliothèques JavaScript (frameworks), le test JavaScript croisé est aussi proche de la situation actuelle. Mais ce n'est pas le cas dans le développement CSS, en particulier les trois versions actuellement dans IE.

Cet article tente de fournir une référence détaillée et facile à utiliser pour différents développeurs qui souhaitent comprendre le soutien de CSS pour IE6, IE7 et IE8. Cette référence contient un aperçu et une compatibilité des situations suivantes:

A. L'un des trois navigateurs prend en charge les entrées, mais les deux autres ne le font pas.

B. Deux des trois navigateurs soutiennent l'entrée, mais l'autre ne le prend pas en charge.

Cet article ne discutera pas:

A. Entrées qui ne sont pas prises en charge par les trois navigateurs

B. Attributs privés

Par conséquent, cet article se concentre sur la différence entre les trois navigateurs, plutôt que sur les défauts de soutien nécessaires. La liste est divisée en cinq parties suivantes:

1. Sélecteur et héritage

2. Pseudo-classes et pseudo-éléments

3. Attribut support

4. Autres technologies

5. Bogues importantes et problèmes d'incompatibilité

1. Sélecteur et héritage

A. Sous-secteur

Exemple

décrire

Le sélecteur d'enfants sélectionne tous les éléments enfants directs d'un élément parent spécifique.

Soutien

Insectes

Dans IE7, s'il y a un commentaire HTML entre la balise parent et la balise enfant, le sélecteur d'enfant ne fonctionnera pas.

B. chaîne

Exemple

décrire

La classe de chaîne est utilisée pour envoyer un élément HTML avec plusieurs déclarations de classe, comme ceci:

Soutien

Insectes

IE6 semble soutenir cette situation car elle peut correspondre à la dernière classe de la chaîne à l'élément qui utilise la classe, cependant, il ne limite pas un élément qui utilise toutes les classes de la chaîne.

C. Sélecteur d'attribut

Exemple

décrire

Ce sélecteur permet de positionner un élément tant qu'il a spécifié des propriétés. Dans l'exemple ci-dessus, toutes les balises avec l'attribut HREF seront limitées, tandis que des balises sans l'attribut HREF ne seront pas limitées.

Soutien

D. Selecteur de frère approchant

Exemple

décrire

Ce sélecteur localise les balises de frères et sœurs proches de l'élément spécifié. L'exemple ci-dessus limitera la balise P, mais il doit être le frère de la balise H1 et doit suivre directement derrière la balise H1. Par exemple:

Dans le code ci-dessus, le style CSS ne fonctionnera que pour la première p. Parce que c'est le frère de H1 et suit H1 immédiatement. Le deuxième P est également un frère de H1, mais il ne suit pas immédiatement H1.

Soutien

Insectes

Dans IE7, s'il y a un commentaire HTML entre les frères et sœurs, le sélecteur de frère adjacent ne sera pas valide.

E. Selecteur de frère ordinaire

Exemple

décrire

Ce sélecteur localise tous les éléments de frères et sœurs suivant un élément spécifié. L'application de ce sélecteur à l'exemple ci-dessus fonctionnera pour les deux balises p. Bien sûr, si un élément P apparaît avant H1, cet élément P ne sera pas apparié.

Soutien