IE6 bug. La taille de la div augmente quand un: hover est déclenché

Question

J'ai une page où il y a une liste de "tags", comme ici dans SO, et quand la souris est dessus, elle s'assombrit.

Cela fonctionne très bien avec Ie7, 8, FF, Chrome, Safari etc ... mais IE6 a un bug qui quand un: hover est déclenché.

Le bug est que le div que ceux (ul li a) sont contenus, obtient une augmentation de la taille.

le css J'est:

div.options ul.tags li a:hover 
{ 
    background-color: #D5E4A5; 
} 

si je supprime ce style ou tout simplement le commentaire "background-color: # D5E4A5;" ça ne se passe pas ...

une idée de comment y remédier?

merci!

EDIT: Voici une capture d'écran du bug: (ou était-ce les marges)

alt text http://i38.tinypic.com/28bvhxf.jpg

Answer 1

juste réparé! : D

ce que j'avais avant était:

<div class="options clearfix"> 
    <!--content here--> 
</div> 

et je l'ai remplacé pour:

<div class="options"> 
    <div class="clearfix"> 
     <!--content here--> 
    </div> 
</div> 

Maintenant IE6 est heureux, et je suis heureux aussi ...

Merci à tous pour votre aide!

Answer 2

Je pense que je suis tombé sur cette fois, et ce qui se passait était que les frontières ont été modifiées I Il a fini par se laisser aller, et il n'a fait que donner aux éléments problématiques une bordure transparente de 1px, et l'appeler un jour. Je doute vraiment que cela devienne votre solution, mais j'espère que cela vous donnera une idée de la direction à suivre!

Answer 3

Cela m'est arrivé aussi, mais je ne me souviens pas exactement où c'était. Je pense que je l'ai résolu, mais je ne suis pas tout à fait sûr de comment. Je peux penser à deux choses:

1. Donnez l'élément "layout". J'ai tendance à le faire avec zoom: 1.

2. Ajouter vertical-align: top soit l'élément a ou li.

Pourriez-vous donner un exemple de code plus complet? Je ne peux pas le reproduire avec ce CSS.

Answer 4

Avez-vous spécifié explicitement la hauteur de cette div? Si ce n'est pas le cas, régler la hauteur pourrait faire disparaître cela.

Answer 5

Les étiquettes sont-elles situées à un endroit où vous pouvez leur donner une couleur d'arrière-plan tout le temps? Si c'est le cas, est-ce que le réglage de la couleur d'arrière-plan quand: hover n'est pas activé cause toujours une modification de la hauteur?

En note, je ne peux pas reproduire ce code HTML correspondant à la règle que vous avez décrite, donc le problème peut provenir d'un autre endroit plus haut sur la page. La meilleure chose que je puisse suggérer est de faire ce que dit Mercator et de donner la disposition des éléments.

EDIT: Juste un coup de feu dans l'obscurité, mais vous pouvez essayer de définir une valeur pour line-height sur div.options.

EDIT 2: Après avoir vu vos captures d'écran Je me souviens que je l'ai eu ce problème au travail avant, et le correctif dans mon cas était d'ajouter position:relative; zoom:1; au conteneur (ou peut-être les liens, j'oublie!) . Essayez ça?

EDIT 3: Après googling pour certaines solutions, vous pouvez essayer de définir la hauteur si votre conteneur explicitement. Si this ne fonctionne pas, je n'ai aucune idée de ce qu'il faut faire!

Answer 6

Il s'agit généralement d'une bordure dont l'ensemble n'a pas été défini à l'origine. Essayez de définir une bordure sur le DIV croissant à la couleur d'arrière-plan par défaut. Je pense que vous ne verrez plus grandir.

Answer 7

J'ai aussi ce problème. Le déclencheur est certainement la couleur de fond sur le vol stationnaire, mais les solutions habituelles de donner le parent hasLayout ne fonctionnent pas, je pense à cause de l'imbrication des balises A à l'intérieur d'autres balises. De ce que j'ai fini par faire, votre solution d'imbriquer le correctif clair est la bonne logique: séparer l'élément fautif, parent et effacer les objets.

La solution que je l'ai fait était la suivante:

<div class="options"> 
<!--content here--> 
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]--> 
</div> 

Avec le CSS suivant:

.ie6clear{ clear:both; height:0; overflow:hidden; } 

De cette façon, le CSS clearfix est appliquée uniquement pour IE6, met en évidence ce que le balisage étranger est, et le rend facile à enlever quand IE6 n'est plus supporté.