基于 CSS 精灵的翻转在 IE6 中闪烁答案

【问题标题】：CSS sprite based rollover blinks in IE6基于 CSS 精灵的翻转在 IE6 中闪烁
【发布时间】：2012-07-16 06:10:22
【问题描述】：

我正在使用基于 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 图像文件有关（尽管它们没有任何透明度）或者可能是简单的文档类型（XHTML 过渡）

感谢您的洞察力。

编辑（已解决）：

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

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

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

【问题讨论】：

标签： html css internet-explorer-6

【解决方案1】：

查看这些解决方案-

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

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

【讨论】：

+1 IE缓存设置通常是这种事情的原因
这解决了问题！我只是在 IE6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} 的条件语句中添加了以下内容

【解决方案2】：

浏览器正在从服务器请求您指定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 应该是唯一的。

【讨论】：

虽然这有助于清理我的代码，但这不是问题的原因。谢谢！
第一条规则中的#step1:hover 选择器是多余的，因为将鼠标悬停在元素上仍将继续匹配#step1。完成此操作后，您可以将第一条和第二条规则合并为一个，因为它们共享相同的选择器。

【解决方案3】：

我没有 IE6 可供测试，但您是否检查过该图像是否可以被客户端完全缓存？它应该有一个明确的 Expires 或 Cache-Control: max-age HTTP 标头。

【讨论】：

【解决方案4】：

本文讨论了这个问题的触发因素以及其他一些解决方案：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;
}

【讨论】：

【解决方案5】：

为了好玩，如果你的 :hover 样式只指定会发生什么

 {background-position: right top;}

【讨论】：

闪烁并没有消失。事实上，任何具有翻转状态和背景图像的元素都会发生这种情况。

【解决方案6】：

听起来像是典型的“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;
}

让我知道你的进展:)

【讨论】：