Pour Internet Explorer 8 (IE8), j'aimerais utiliser le CSS suivant:
color : green;
Je voudrais appliquer un hack qui ne concerne que IE8, pas IE9, IE6 et 7.
Utilisez des commentaires conditionnels en HTML, comme ceci:
<!--[if IE 8]>
<style>...</style>
<![endif]-->
Voir ici: http://www.quirksmode.org/css/condcom.html
Vous pouvez tester les versions de IE de manière fiable et vous assurer également que les autres navigateurs ne seront pas déroutés.
Utilisez des requêtes multimédia pour séparer chaque navigateur:
/* IE6/7 uses media, */
@media, {
.dude { color: green; }
.gal { color: red; }
}
/* IE8 uses \0 */
@media all\0 {
.dude { color: brown; }
.gal { color: orange; }
}
/* IE9 uses \9 */
@media all and (monochrome:0) {
.dude { color: yellow\9; }
.gal { color: blue\9; }
}
/* IE10 and IE11 both use -ms-high-contrast */
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
Références
Utilisez \0
.
color: green\0;
Cependant, je do recommande des commentaires conditionnels, car vous voudriez également exclure IE9 et il est encore imprévisible que ce piratage affecte également IE9 ou non.
Quoi qu'il en soit, je n'ai jamais eu besoin d'un hack spécifique à IE8. Quel est le problème spécifique à IE8 que vous souhaitez résoudre? Le rendu est-il en mode standard IE8? Son rendu est plutôt bon.
Si nécessaire, de petites modifications dans CSS utilisent\9 il cible IE8 et versions antérieures (IE6, IE7, IE8).
.element {
color:green \9;
}
Le meilleur moyen est d’utiliser des commentaires conditionnels en HTML, comme ceci:
<!--[if IE 8]>
<style>...</style>
<![endif]-->
Ainsi, une question récente m'a incité à remarquer qu'un groupe de sélecteurs a piraté pour exclure IE 8 uniquement.
.selector, #excludeIE8::before {}
fera en sorte que IE 8 jette tout le jeu de sélecteurs, alors que 5-7 et 9-11 le liront très bien. Tous les sélecteurs ::
(::first-line, ::before, ::first-letter, ::selection
) fonctionneront. J'ai simplement choisi ::before
pour que la ligne se lise avec précision. Notez que l'objectif du faux sélecteur ::before
est de simuler befake, alors assurez-vous de le remplacer par autre chose si vous avez réellement un élément avec l'ID excludeIE8
Fait intéressant, dans les navigateurs modernes (FF 45-52, GC 49-57, Edge 25/13), un mauvais sélecteur ::
mange l’ensemble du jeu de sélecteurs ( dabblet demo ). Il semble que la dernière version Windows de Safari (et LTE IE 7, lol) ne présente pas ce comportement tout en comprenant toujours ::before
. De plus, je ne trouve rien dans la spécification pour indiquer qu'il s'agit d'un comportement voulu et qu'il provoquerait une casse sur n'importe quel sélecteur set contenant: ::future-legitimate-pseudoelement
... J'ai tendance à le dire est un insecte - et celui-ci va grignoter nos arrières dans le futur.
Cependant, si vous voulez seulement quelque chose au niveau de la propriété (plutôt que du niveau de la règle), Ziga ci-dessus avait la meilleure solution en ajoutant \9
(l'espace est la clé; ne copypastez pas inline car il utilise un nbsp):
/*property-level hacks:*/
/*Standards, Edge*/
prop:val;
/*lte ie 11*/
prop:val\9;
/*lte ie 8*/
prop:val \9;
/*lte ie 7*/
*prop:val;
/*lte ie 6*/
_prop:val;
/*other direction...*/
/*gte ie 8, NOT Edge*/
prop:val\0;
Côté note, je me sens comme un sale nécromancien - mais je voulais un endroit pour documenter le bidouillage de sélecteur exclude-IE8 que j'ai trouvé aujourd'hui, et cela semblait être l'endroit le plus approprié.
Faire quelque chose comme ça devrait marcher pour vous.
<!--[if IE 8]>
<div id="IE8">
<![endif]-->
*Your content*
<!--[if IE 8]>
</div>
<![endif]-->
Ensuite, votre CSS peut ressembler à ceci:
#IE8 div.something
{
color: purple;
}
Ne pouvez-vous pas utiliser le hack que vous avez déjà montré, puis utilisez un hack IE7 et inférieur pour le remplacer?
Il existe différentes manières d’obtenir une classe sur l’élément HTML, en identifiant la version IE à laquelle vous êtes opposé: Modernizr , le HTML 5 Boilerplate , etc. Ensuite, vous pouvez utiliser cette classe (par exemple .lt-ie9) dans un sélecteur CSS normal, aucun piratage nécessaire. Si vous souhaitez uniquement affecter IE8 et non les versions précédentes, restaurez l'ancienne valeur à l'aide d'un sélecteur .lt-ie8.
Pour le navigateur natif IE8 seul:
.classname{
*color: green; /* This is for IE8 Native browser alone */
}