IE8中有些图片闪烁

Question

我已将代码隔离到这些 div 图像交换。第二个图像闪烁，无论位置如何。我想不通？图像与菜单图像悬停状态基本相同。我的 IE8 代码有问题吗？

<div class="home">&nbsp;</div>
<div class="image2">&nbsp;</div>

这是 CSS：

.home{
    background-image: url('home.png');
    background-repeat:no-repeat;
}
.home:hover {
    background-image: url('home_hover.png');
    background-repeat:no-repeat;
}
.image2{
    background-image: url('image2.png');
    background-repeat:no-repeat;
}
.image2:hover {
    background-image: url('image2_hover.png');
    background-repeat:no-repeat;
}

第一张图片不闪烁。 CSS 是相同的，我可以重新定位 DIV 并获得相同的结果。为什么图像会闪烁？我是否也为其添加了高度或宽度属性似乎并不重要。

Answer 1

闪烁是由于您为悬停效果使用了不同的图像。当您的页面最初加载时，home.png 和 image2.png 将被加载，而不是您的悬停图像。 home_hover.png 和 image2_hover.png 的悬停图像只会在您第一次悬停应用它们的元素时加载。这意味着，当您将鼠标悬停时，就会向服务器发出对该背景图像的请求。这需要一些短暂的时间，但足以产生闪烁。

我建议将每个图像的默认状态和悬停状态组合成一个图像。如果您有一个 100 像素 x 50 像素的图像，那么您的组合图像将是 100 像素 x 100 像素。将默认状态放在图像文件的顶部，将鼠标悬停在底部。

然后，您的下一步是在具有翻转的元素上设置尺寸。 CSS 会是这样的：

.home {
     background-image: url(home.png);
     background-position: 0 0;
     display: block;
     width: 100px;
     height: 50p;x
}
.home:hover {
     background-position: 0 -50px;
}

这里发生的是您正在创建一个 100 像素 x 50 像素大小的窗口。该尺寸与默认状态的图像文件的上半部分匹配。图像的额外 50 像素保持隐藏状态。

使用background position 允许我们相对于元素移动图像。我们使用 -50px 将图像向上移动，显示图像的下半部分，即悬停状态。

注意：您也不需要为您的 DIV 使用  。