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