爲什麼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打破：

懸停作品：

但非懸停狀態被打破。我不完全確定，但我認爲背景圖像又被使用了（這可能解釋了懸停時消失的小三角形 - 它們來自右側的三角形凹口？）。

我想說這是一個錯誤，但我不確定，即使在加那利版本中它仍然呈現這種方式。

有誰知道爲什麼這突然爆發在Chrome？這是一個錯誤嗎？或者我做錯了什麼？

Answer 1

你應該使用精靈。

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

適用於各種瀏覽器。