IE10 et :hover:before
Accueil Tags Recherche05 Novembre 2014
IE10 et :hover:before
Comment utiliser le sélecteur CSS:hover:before
avec IE10 ?
Le problème
Je pars du principe que vous connaissez les pseudo-éléments :before
en CSS.
Prenons le code suivant :
* {
background: tomato;
box-sizing: border-box;
height: 100%;
margin: 0;
}
body:hover:before {
background: limegreen;
content: '';
display: block;
height: 100%;
}
D’abord, on utilise un rouge pour toutes les couleurs de fond. Lorsqu’on survole la balise <body>
, on lui ajoute un pseudo-élément :before
avec un fond vert. L’exemple ne sert absolument à rien, c’est une simple illustration du problème. Ce code fonctionnera bien sous n’importe quel navigateur, mais pas sous IE10 (inutile de tester un IE11 en mode compatibilité, il faut un vrai IE10 pour reproduire le bug).
La solution
Pour pouvoir utiliser le sélecteur :hover:before
, il va simplement vous falloir définir un sélecteur :hover
plus tôt dans le fichier CSS :
* {
background: tomato;
box-sizing: border-box;
height: 100%;
margin: 0;
}
body:hover {
/* Fix IE10 :hover:before issue */
}
body:hover:before {
background: limegreen;
content: '';
display: block;
height: 100%;
}
Rien d’autre.