IE6中基于CSS sprite的翻转闪烁

StackOverflow https://stackoverflow.com/questions/1810828

  •  05-07-2019
  •  | 
  •  

题

我正在使用基于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让这个简单的东西搞砸了。我所有的翻车都闪烁着。

当鼠标悬停在图像上消失片刻然后移动到过度状态。一个有趣的怪癖，如果我离开页面然后按BACK按钮，问题似乎消失了！

我认为它与PNG图像文件有关（虽然它们没有任何透明度）或者也许像doc类型那样简单（XHTML过渡）

感谢您的见解。

编辑（已解决）：

Jitendra提供了解决问题的链接。我只是将其添加到头部：

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

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

其他提示

浏览器正在为您指定 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应该是页面唯一的。

我没有IE6可以测试，但是你检查过以确保客户端可以完全缓存图像吗？它应该有一个显式的Expires或Cache-Control：max-age HTTP头。

本文讨论了此问题的触发器和其他一些解决方案： http://web.archive.org/web/20100105213004/http://www.fivesevensix.com/studies/ie6flicker/

此外，Gabriel提供的解决此问题的CSS可以改进为：

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

为了好玩，如果您的：悬停样式仅指定

会发生什么 
 {background-position: right top;}

听起来像'IE6 Flicker'的典型情况，这是由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;
}

让我知道你是如何进行的：）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top