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

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

的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]-->

來源

2009-11-27 dhornbein

看到這些解決方案 -

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

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

來源

2009-11-27 22:51:12

+1 IE緩存設置通常是這種事情 – bobince 2009-11-28 00:19:32

這解決了這個問題的原因！我只是在IE6的條件語句中添加以下內容： – dhornbein 2009-11-28 17:19:55

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

{background-position: right top;}

來源

2009-11-27 22:32:56 JonSG

閃爍沒不會離開。實際上，它會發生在任何有翻轉狀態和背景圖像的元素上。 – dhornbein 2009-11-28 17:17:10

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

來源

2009-11-27 22:40:59 RickNZ

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

讓我知道你上車:)

來源

2009-11-27 22:45:54 BenTheDesigner

瀏覽器從服務器請求圖像對於您指定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應該是頁面唯一的。

來源

2009-11-27 22:55:14

雖然這有助於清理我的代碼，但這不是原因的問題。謝謝！ – dhornbein 2009-11-28 17:16:24

的'＃第一步：hover'在第一個規則選擇是多餘的，因爲上空盤旋元素還是會繼續配合'＃step1'。一旦你這樣做了，你可以將第一條和第二條規則合併爲一個，因爲它們共享相同的選擇器。 – 2011-07-05 22:23:27

這篇文章有這個問題的觸發器和一些其他的解決方案的討論：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; 
}

來源

2011-07-05 22:29:16

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

回答

相關問題