Problème:
Sous IE (Internet Explorer), j’ai un menu déroulant dropdown dont la partie déroulée (les sous-niveaux) se masque involontairement lorsqu’elle est survolée au passage de la souris.
Autrement dit, IE (même les versions les plus récentes) n’est pas capable de détecter une bordure CSS comme un élément « physique ». Dans le cas de mon menu, le sous-niveau est encadré par une bordure grise de 10px d’épaisseur. Lorsqu’on navigue à la souris et qu’on fait le chemin de l’entrée « Particuliers » vers le sous-menu correspondant (cf. capture ci-dessous), le curseur traverse la bordure ce qui a pour effet une perte de focus et une disparition prématurée de la partie déroulée. (La bordure incriminée est en noir dans ma capture – lorsque le curseur de la souris passe dessus, le sous-menu disparaît).
Solution:
Ne pas utiliser la propriété CSS border pour un habillage se trouvant sur le passage de la souris. 🙂
J’ai d’abord tenté (sans succès) de remplacer la border-top par une ombre interne avec la propriété CSS box-shadow et la valeur inset.
La solution qui fonctionne consiste à utiliser un dégradé CSS (gradient). On commence par générer son dégradé via un outil en ligne comme Ultimate CSS Gradient Generator par Colorzilla.
Le code CSS généré est le suivant:
|
1 2 3 4 5 6 |
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+10,ffffff+10,ffffff+100 */ background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 0%, #000000 10%, #ffffff 10%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ |
Suivant les navigateurs qu’on souhaite supporter, on peut réduire le code à cette ligne (à condition d’utiliser un outil d’auto-prefixage CSS qui rajoute les -moz, -webkit, -o, -ms en fonction du scope de navigateurs et OS prédéfinis) :
|
1 |
background: linear-gradient(to bottom, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
Il reste ensuite à modifier cette ligne en fonction de notre besoin. Dans mon cas, remplacer par les bonnes couleurs et remplacer l’unité % par du px pour coller aux 10px de ma bordure:
|
1 |
background: linear-gradient(to bottom, #000000 0%,#000000 10px,#ffffff 10px,#ffffff 100%); |