28172 sujets

CSS et mise en forme, CSS3

Petit défi : bug IE7

Bonjour à tous,

un tar... petit vicieux m'a fait remarquer un bug assez étrange qui n'apparait que sur IE sur ce menu : un menu utilisant des sprites CSS.

Accrochez-vous, c'est assez bizarre : si on clique sur les liens (clic gauche normal), n'importe où sur chaque lien, ça marche bien (j'ai mis 1 2 3 ou 4 pour voir que le lien est bien activé).

Par contre, si on met le curseur sur le texte d'un lien (ex : "Sprites via CSS"), qu'on fait un clic-droit pour ouvrir dans un nouvel onglet, ça ne fonctionne pas sous IE (par contre, un clic-gauche normal passe).

Si je cache :

#navigation span{
display:none;
}


le problème n'est plus.

J'ai testé avec Firefox, Opéra, Chrome, pas eu de problème (normal quoi).

Quelqu'un a une idée ? Je sèche pour ma part. Smiley biggol

D'avance merci !
Modifié par Nico3333fr (09 Dec 2011 - 16:13)
Hello.

Vraiment bizarre en effet. Et de mon côté le bug se produit aussi au click droit sur le span dans IE9 sans mode de compatibilité.

On dirait que le span réagit comme si il était hors du lien, et placé en absolu dessus.

Ce qui est encore plus bizarre, c'est que supprimer le display:inline-block sur le span via la developer toolbar de IE semble régler le problème.
Apparemment, le problème est sur IE9 aussi, désolé, j'avais mal testé.

Chose plus curieuse : si on fait un Ctrl-Clic sur le texte du lien, ça l'ouvre bien dans une autre fenêtre.
bonjour,

je te propose de modifier ton approche de style pour replacer et tailler ton span.

1) padding-right de 5px (a deduire en largeur) pour le lien.

2) le span en inline par defaut avec un padding-left de 52px, un position:relative avec un top de 20px.

Visuellement ton texte sera positionné au même endroit et contenu dans les premiers 85 pixel de largeur du lien.

Note simplement que tu peut aussi seulement definir les padding de <a> pour repousser le texte dans la zone voulu et eliminer le <span>....

Cordialement,
GC
Administrateur
Bonjour,

dans le cas qui fonctionne pas sous IE7, le span a le hasLayout (height ... d'ailleurs min-height plutôt hum Smiley smile ). J'ai jamais maîtrisé les bugs dûs au hasLayout (seulement certains dûs à son absence), je pourrai pas t'aider plus.

Sinon, avec la présence d'un span dans un caption ou un legend cela permet de positionner le texte comme on veut (edit: sous IE) là où caption et legend posent des problèmes, est-ce qu'un span dans un a aurait le même effet dès qu'il est un peu stylé ?
Modifié par Felipe (09 Dec 2011 - 19:05)
Felipe a écrit :
avec la présence d'un span dans un caption ou un legend cela permet de positionner le texte comme on veut (edit: sous IE) là où caption et legend posent des problèmes

Jusqu'à IE 7. À partir d'IE 8, pas besoin d'un span dans ces cas de figure.
pour le bug IE7 ou compatibilité, c'est probablement un heritage de IE6 ou un span dans un lien multipliais les bug ou défaut d’interprétations et d'affichage Smiley decu hover, couleur de police, first-letter, etc ...). La balise <a> avait déjà a elle seule des défauts.

Avec un lien en display:block, un doctype valide et son modèle de boite qui va avec, le span est inutile. Les marges internes suffissent à repousser le texte dans les zones que l'on veut , en l'occurrence: 20px du haut, 5px de gauche et environ 50px de droite.

Cordialement
je verrai plutôt les questions comme:

A quoi sert le span ?
Peut-on s'en passer ?
Quel intérêt de surcharger le balisage et les styles ?

Et enfin , Pourquoi risquer de faire surgir un vieux défaut de IE (maintenant que l'on est plusieurs a l'avoir reconnus ou identifié et que tu sais dans quels conditions le visiteur y aura droit) ?
Au contraire je trouve qu'il ne faut pas hésiter à imbriquer des div ou des span si cela procure de la prédicabilité et garantit une réutilisabilité des classes.

Les éléments flottants avec un padding et une largeur sont parfois traîtres. Dans la philosophie OOCSS, il est conseillé de coller le padding à un élément enfant.
Sujet clos
Aller à