CSS -: hover est lent/laggy dans IE7

Question

Ceci est vraiment étrange. J'ai ce site où j'ai un menu de liste avec un effet simple: hover sur chaque élément du menu.

http://w3box.com/mat/

Dans Firefox, il fonctionne très bien. Mais je IE7 atleast il y a un décalage. Je ne l'ai pas testé dans IE8 mais je pense que c'est là aussi.

Maintenant, j'ai essayé des veriations au code pour voir ce qui pourrait causer le problème. Et j'ai vu beaucoup de messages sur des scénarios similaires. Mais aucun d'entre eux ne semblait s'appliquer à mon cas.

tout à l'heure je remarquai que dans ma feuille de style CSS, j'ai ceci:

li:hover { 
background-image: url(img/TopLine.png); 
Height:29px; 

}

assez étrange, si je retire les spécifications de hauteur, il n'y a pas de retard! Qu'est-ce qui peut causer cela? Pourrait-ce être des couches de remplissage et des marges à la classe parent li? Ou la classe parente au-dessus de celle-là?

Ceci est le code de ces articles. Le reste du CSS, vous pouvez sous /main.css du site

#header { 
padding-right:7%; 
height: 57px; 
background-image:url(img/TopLine.png); } 

.header a { 
font-family:georgia; 
font-size:22px; 
color:#ebebeb; 
text-decoration:none; } 

.header li { 
float:right; 
list-style: none; 
margin-top:10px; 
padding-top:18px; 
padding-left: 23px; 
padding-right: 23px; 
height:23px; } 

li:hover { 
background-image: url(img/TopLine.png); 
Height:29px; } 

Toutes les idées sur la façon dont je peux améliorer cela?

Answer 1

Je n'ai pas vraiment de retard. La première fois, il y a un léger retard - c'est probablement dû au chargement de l'image d'arrière-plan.

Il est préférable de définir un arrière-plan sur l'élément de liste approprié, puis de modifier la position de l'arrière-plan lors du survol. (Il y a beaucoup de questions sur SO à ce sujet.)