css - 即使 Sprite 用于悬停图像，图像也会在鼠标悬停时闪烁

Question

我有一个网站:parisforaweekend.com带有在鼠标悬停时改变颜色的“订阅”按钮图像。两个图像都是同一图像 Sprite 的一部分。

仍在 Chrome 中(第 15 版)我变得非常引人注目，但不规则发生，在鼠标悬停时闪烁。这怎么可能？还在 IE8 和 FF6 上测试过，似乎没有问题。这让我很烦。

我想一般的问题是以前有人见过这样的东西吗？有什么可以解释这种奇怪的行为吗？

虽然我看不出它有什么用处，但我包含了相关的 css-snippet:

CSS

编辑:更改了 css 规则的顺序以反射(reflect)实际情况(尽管我看不出有什么不同)

#mc_embed_signup input.button {
display: inline-block;
width: 100px;
margin: -1px 0 10px 15px;
padding: 0;
border: 0 none;
cursor: pointer;
background: url('http://static.parisforaweekend.com/img/s.jpg') 0 0;
line-height: 32px;
}

#mc_embed_signup input.button:hover {
background: url('http://static.parisforaweekend.com/img/s.jpg') -101px 0;
}

HTML

<input type="submit" value="" name="subscribe" id="mc-embedded-subscribe" class="button">

编辑:也许这与我使用 S3 + cloudfront(亚马逊的 CDN)这一事实有关。没有正确缓存(在边缘位置或客户端上)并执行 2 个请求或其他操作。嗯，还是不太可能。

Answer 1

您是否尝试过使用 background-position 而不是 background？我也没有看到您提到的问题，但这可能与重新定义悬停时的背景图像有关。