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%); |