css - 为什么 Chrome 突然在超链接标签上出现背景图像问题？

Question

好的，所以我有这个我维护的网站，使用 WordPress 等。博客的其中一个东西是右上角的一个小旗帜/丝带，它有三个标志，代表该网站的相关 Twitter、Facebook 和RSS订阅。

我希望它是一个全 CSS 超链接，所以我以这种方式处理 HTML:

<div id="headerflag">
    <a class="headerflagfacebook" href="http://www.facebook.com/(client's facebook link)"></a>
    <a class="headerflagtwitter" href="http://twitter.com/(client's twitter link)"></a>
    <a class="headerflagrss" href="http://feeds2.feedburner.com/(client's rss link)"></a>
</div>

CSS 看起来像这样

#headerflag
{
    width: 151px;
    height: 40px;
    position: relative;
    left: 708px;
    top: 20px;
    z-index: 3;
    background-image:url('images/flag.png');
}

a.headerflagfacebook, a.headerflagfacebook:hover
{
    width: 13px;
    height: 26px;
    position: absolute;
    left: 36px;
    top: 7px;
    z-index: 4;
    background-image:url('images/flag-facebook.png');
    display: block;
}

(对其他两个重复，定位偏移、图像名称等略有不同)

直到最近，它在任何地方都运行良好，甚至在基于 WebKit 的 Safari 中也是如此。

但现在它在 Chrome 中被破坏了:

悬停效果:

但是非悬停状态被打破了。我不完全确定，但我认为背景图像被再次使用(这可能解释了悬停时消失的小三 Angular 形 - 它们来自右侧的三 Angular 形凹口？)。

我会说这是一个错误，但我不确定，即使在 Canary 构建中它仍然以这种方式呈现。

有谁知道为什么这突然在 Chrome 中崩溃了？这是一个错误吗？还是我做错了什么？

Answer 1

您应该使用 Sprite 。

看看这个教程。 http://iamchristill.com/html/the-right-way-to-make-rollover-buttons/

跨浏览器工作。