在IE6中，CSSsprite基于滚动的闪烁。-CSSspritebasedrolloverblinksinIE6

3  

See these solutions-

看到这些解决方案,

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

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

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

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

3  

The browser is requesting the image from the server for each CSS rule where you specify the url() property. To fix this, simply combine the background portion of your two rules into one rule and set the background-position property for each state of the css sprite.

浏览器正在为您指定url()属性的每个CSS规则从服务器请求映像。要解决这个问题，只需将两个规则的背景部分合并到一个规则中，并为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;
}

This problem actually happens in many browsers. It's just more noticeable in IE6.

这个问题实际上在许多浏览器中都存在。这在IE6中更加明显。

As a side note, if you're using IDs, specifying two ids in your selector is unnecessary. IDs should be unique to the page.

作为补充说明，如果您正在使用IDs，则无需在选择器中指定两个id。id对页面应该是唯一的。

1  

I don't have IE6 around anymore to test with, but have you checked to make sure that the image is fully cacheable by the client? It should have an explicit Expires or Cache-Control: max-age HTTP header.

我已经没有IE6可以测试了，但是你检查过图片是否可以被客户缓存吗?它应该有一个显式的过期或Cache-Control: max-age HTTP头。

1  

This article has a discussion of the triggers of this problem and some other solutions: http://web.archive.org/web/20100105213004/http://www.fivesevensix.com/studies/ie6flicker/

本文讨论了这个问题的触发因素以及其他一些解决方案:http://web.archive.org/web/20100105213004/http://www.fivesevensix.com/studies/ie6flicker/

Also, the CSS to fix this as provided by Gabriel can be improved to:

另外，Gabriel提供的CSS修复可以改进为:

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

0  

for fun, what happens if your :hover style specifies only

有趣的是，如果您的:hover样式只指定

 {background-position: right top;}

0  

Sounds like a typical case of 'IE6 Flicker' which is caused by a setting in IE6. The browser re-requests the image from the server on hover... Stupid right? Have you tried 'Double Buffering' the image? By this I mean place the same background image on both the parent element and the link itself. Example below:

这听起来像是IE6中设置的“IE6闪烁”的典型例子。浏览器在悬浮状态下重新请求服务器的图像……愚蠢的对吧?你尝试过“双缓冲”图像吗?我的意思是在父元素和链接本身上放置相同的背景图像。在下面的例子:

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

Let me know how you get on :)

告诉我你的进展情况: