Text-shadow et underline sur un lien hypertexte

Bonsoir,

Je viens de finir l'intégration d'un de mes designs. Je travail essentiellement avec le navigateur Chrome.

J'ai repéré un petit soucis avec le text-shadow et l'underline sur un lien hypertexte visible uniquement sur Firefox (j'utilise la version 5).

http://tof.canardpc.com/view/14122a75-4283-4df5-8f45-4763360d3638.jpg

L'image parle d'elle-même, lorsque je survole la zone du lien, l'ombre porté se place devant l'underline.

Voici le CSS en question:

#header li a{
	color:#8eb3d0;
	font-family:Verdana, Helvetica, sans-serif;
	font-size:0.7em;
	font-weight:bold;
	text-shadow:0px 3px 1px #141414;
	filter: ropshadow(color=#141414, offx=0, offy=3);
}

#header li a:hover{
	text-decoration:underline;
}

Après avoir effectué une recherche sur google, il semblerait que cela soit un bug connu.

Comment puis-je régler ce problème?

Cordialement.

Bonjour,

as-tu songé à utiliser une bordure plutôt qu'un underline ? je ne sais pas si c'est possible dans ton contexte, mais ça semblerait une solution facile et rapide.

Merci de ton attention.

Malheureusement cela donne le même résultat...

#header li a:hover{
/*	text-decoration:underline;	*/
	border-bottom:1px solid #fff;
}

Seldoon182 a écrit :
Comment puis-je régler ce problème?

À part forcer les utilisateurs de Firefox à utiliser au minimum la version 8, je vois pas trop.

Tu peux juste éviter les conditions de ce problème:
- utiliser une bordure que tu peux placer précisément par rapport au texte (par exemple à 4px sous la baseline);
- et utiliser une ombre qui ne descend pas jusqu'à la bordure (pas plus de 4px vers le bas).

Merci fvsch.

Je vais préparer une feuille de style pour les versions antérieur à Firefox 8.

Merci.