Saut étrange de la hauteur de l'élément de liste lorsque l'étendue masquée masquée est affichée dans Hover dans Chrome

Question

J'ai une liste de liens qui utilisent des éléments de span imbriqués comme survol avec des informations supplémentaires sur le vol stationnaire.

Voir cette page: http://kenbrookyouth.com/summercamp11/

Ainsi, dans tout firefox dans cette liste (voir la liste des camps dans la section « Summer Camp » de la page, juste en dessous des deux descriptions, il y a deux listes - l'une des la gauche et la droite) a l'air bien, y compris lorsque vous passez la souris sur les éléments de la liste (noms de camp). Cela produit l'effet désiré des intervalles imbriqués cachés apparaissant avec les informations d'âge pour chaque camp. Toutefois, dans Chrome et Safari, les éléments de la liste présentent un étrange saut en surbrillance en survol, de sorte qu'il semble que la plage imbriquée masquée soit réellement affichée en tant que bloc, mais non flottante comme elle le devrait.

Des conseils sur celui-ci?

Answer 1

Le problème peut être résolu en enveloppant le texte dans vos liens en <span> tags (par exemple "Adventurers" dans le premier). Pour une raison quelconque (je ne connais pas la raison exacte), les flotteurs se comportent mieux lorsque d'autres éléments autour d'eux ont des largeurs ou sont flottants ou les deux. Le texte devient également imprévisible lorsqu'il n'est pas immédiatement entouré d'une étiquette. J'essaie donc de conserver tout le texte en span s (ou h1, h2 ou toute autre étiquette appropriée au texte). Une autre façon de résoudre le problème consistait à ajouter de la largeur à la balise <a>, mais vous devez définir des largeurs différentes pour chaque lien. Il suffit donc d'utiliser les balises span.