在IE6中基於CSS sprite的翻轉眨眼

Question

我正在使用基於CSS的翻轉「技巧」來切換懸停時元素背景圖像的背景位置。

的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攪亂這個簡單的事情了。我所有的翻車眨眼。

當鼠標移過圖像瞬間消失，然後移到超過狀態。一個有趣的怪癖，如果我離開頁面，然後按下返回按鈕，問題似乎消失了！

我想它與PNG圖像文件做（儘管他們沒有任何透明度）或者，也許一些簡單的文檔類型（XHTML過渡）

感謝您的見解。

EDIT（解決）：

Jitendra提供解決該問題的鏈接。我只是添加到了頭：

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

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

Answer 1

看到這些解決方案 -

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

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

Answer 2

爲了好玩，會發生什麼，如果你的：hover樣式僅指定

{background-position: right top;} 

Answer 3

我沒有IE6不在了來進行測試，但你檢查確保圖像可以被客戶端完全緩存？它應該有一個明確的Expires或Cache-Control：max-age HTTP標頭。

Answer 4

聽起來像是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; 
} 

讓我知道你上車:)

Answer 5

瀏覽器從服務器請求圖像對於您指定url()屬性的每個CSS規則。要解決這個問題，只需將兩條規則的background部分合併爲一條規則，併爲每個css精靈狀態設置background-position屬性。

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

這個問題實際上發生在很多瀏覽器。它在IE6中更加引人注目。

請注意，如果您使用的是ID，則在選擇器中指定兩個ID是不必要的。 ID應該是頁面唯一的。

Answer 6

這篇文章有這個問題的觸發器和一些其他的解決方案的討論：http://web.archive.org/web/20100105213004/http://www.fivesevensix.com/studies/ie6flicker/

此外，CSS來解決這個問題，通過加布裏埃爾提供可提高到：

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