1. 程式人生 > >解決IE下CSS背景圖片閃爍的Bug

解決IE下CSS背景圖片閃爍的Bug

要給一些按鈕或是img設定背景,而為了達到資料與表現樣式分離的效果,通常背景樣式都是在CSS裡設定的,但是這個行為在IE會有一個Bug,那就是因為IE預設情況下不快取背景圖片,所以當滑鼠在有CSS背景的按鈕或是圖片上移動時,圖片會閃爍甚至滑鼠會出現忙的狀態,而在FireFox下沒有這個問題,為了解決這個問題,有兩種解決辦法,其一是在CSS中加入如下樣式,但注意的是,IE7則沒這個問題了.
   (其實,即IE的cache設定為Every visit to the page,而不是預設的Automatically。基本上,只有開發者才會把cache設定為每次訪問檢查更新,所以這個bug其實不會影響真正的使用者(根據在winxpsp2的ie6下測試,雖然可能仍然呼叫了一次網路存取的api,但是並沒有發生實際的請求,症狀就是滑鼠有極短時間的抖動,但是影象不會閃爍)
  在頁面中的任意位置加入如下程式碼,即可達到理想中的效果:

<script>
document.execCommand(”BackgroundImageCache”, false, true);
</script>


(function(){
    /**//*Use Object Detection to detect IE6*/
    var  m = document.uniqueID /**//*IE*/
    && document.compatMode  /**//*>=IE6*/
    && !window.XMLHttpRequest /**//*<=IE6*/
    && document.execCommand;
   
    try{
        if(!!m){
            m("BackgroundImageCache", false, true) /**//* = IE6 only */
        }
       
    }catch(oh){};
})();