Le curseur de survol basé sur le sprite CSS clignote dans IE6

Question

J'utilise le "truc" de survol basé sur CSS qui change la position de fond de l'image d'arrière-plan de l'élément sur le vol stationnaire.

Le CSS

#welcome #step1 
{background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top;} 
#welcome #step1:hover 
{background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll right top;} 

Le code HTML

<div id="welcome"> 
<a class="steps" id="step1" href="?page=signup"></a> 
... 
</div> 

naturellement IE6 mess cette chose simple, vers le haut. Tous mes survols clignotent.

Lorsque la souris survole l'image disparaît pendant un moment puis passe à l'état de dépassement. Une bizarrerie intéressante, si je navigue loin de la page, puis appuyez sur le bouton RETOUR le problème semble disparaître!

Je pense qu'il doit faire avec les fichiers d'image PNG (mais ils n'ont pas de transparence) Ou peut-être quelque chose de simple comme type de document (XHTML transition)

Merci pour votre perspicacité.

EDIT (SOLVED):

Jitendra a fourni le lien pour résoudre le problème. J'ai simplement ajouté à la tête:

<!--[if IE 6]> 
<style type="text/css" > 

html { 
    filter: expression(document.execCommand("BackgroundImageCache", false, true)); 
} 
</style> 
<![endif]--> 

Answer 1

Voir ces solutions-

http://ajaxian.com/archives/no-more-ie6-background-flicker

http://www.hedgerwow.com/360/bugs/dom-fix-ie6-background-image-flicker.html

Answer 2

pour le plaisir, ce qui se passe si votre: style hover spécifie que

{background-position: right top;} 

Answer 3

Je n'ai pas IE6 autour de plus pour tester avec, mais avez-vous vérifié pour s'assurer que l'image est entièrement cacheable par le client? Il devrait avoir un en-tête HTTP expires ou Cache-Control: max-age explicite.

Answer 4

Cela ressemble à un cas typique de 'IE6 Flicker' qui est causé par un réglage dans IE6. Le navigateur re-demande l'image du serveur en vol stationnaire ... Stupide non? Avez-vous essayé 'Double Buffering' l'image? Par là, je veux dire placer la même image de fond sur l'élément parent et le lien lui-même. Exemple ci-dessous:

#welcome { 
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top; 
} 
#welcome #step1 { 
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top; 
} 
#welcome #step1:hover { 
background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll right top; 
} 

Laissez-moi savoir comment vous allez :)

Answer 5

Le navigateur demande l'image du serveur pour chaque règle CSS où vous spécifiez la propriété url(). Pour résoudre ce problème, il suffit de combiner la partie background de vos deux règles en une règle et de définir la propriété background-position pour chaque état de l'image-objet css.

#step1, #step1:hover { 
    background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll; 
} 
#step1 { 
    background-position: left top; 
} 
#step1:hover { 
    background-position: right top; 
} 

Ce problème se produit réellement dans de nombreux navigateurs. C'est juste plus visible dans IE6. En remarque, si vous utilisez des ID, il n'est pas nécessaire de spécifier deux ID dans votre sélecteur. Les ID doivent être uniques à la page.

Answer 6

Cet article a une discussion sur les éléments déclencheurs de ce problème et d'autres solutions: http://web.archive.org/web/20100105213004/http://www.fivesevensix.com/studies/ie6flicker/

En outre, le CSS pour résoudre ce problème comme il est prévu par Gabriel peut être améliorée:

#step1 { 
    background: transparent url(../img/mock/homepage_welcome_step1.png) no-repeat scroll left top; 
} 
#step1:hover { 
    background-position: right top; 
}