IE6中基于CSS Sprite的过渡闪烁 [英] CSS sprite based rollover blinks in IE6

问题描述

我正在使用基于CSS的翻转技巧"，该技巧可将元素的背景图片在悬停时的背景位置切换.

I'm using the CSS based rollover "trick" that switches the background position of the element's background image on hover.

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;}

HTML

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

自然，IE6弄乱了这个简单的东西.我所有的翻转都闪烁.

Naturally IE6 messes this simple thing up. All my rollovers blink.

将鼠标悬停在图像上会消失一会儿，然后移至"over"状态.一个有趣的怪癖，如果我离开页面然后按BACK按钮，问题似乎就消失了！

Upon mouse over the image vanishes for a moment then moves to the over state. An interesting quirk, if I navigate away from the page then press the BACK button the problem seems to go away!

我认为这与PNG图像文件有关(尽管它们没有任何透明度)，或者可能是简单的文档类型(XHTML过渡)

I'm thinking it has to do with the PNG image files (though they don't have any transparency) Or perhaps something simple as doc type (XHTML transitional)

感谢您的见识.

编辑(已解决):

Jitendra提供了解决问题的链接.我只是将其添加到头部:

Jitendra provided the link to solve the problem. I simply added this to the head:

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

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

推荐答案

查看这些解决方案-

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

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

这篇关于IE6中基于CSS Sprite的过渡闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！