Хорошо, у меня есть этот веб-сайт, который я поддерживаю, использую 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;
}
(повторите для двух других с немного отличающимися смещениями, именами изображений и т. Д.)
И до недавнего времени он везде работал просто отлично, даже в Safari на основе WebKit.
Но теперь он сломан в Chrome:
Парящие работы:
Но не зависшее состояние нарушено. Я не совсем уверен, но я думаю, что фоновое изображение используется снова (это может объяснить маленькие треугольники, которые исчезают при наведении - они из треугольной выемки справа?).
Я бы сказал, что это ошибка, но я не уверен, и она по-прежнему отображается таким образом даже в сборке Canary.
Кто-нибудь знает, почему это внезапно сломалось в Chrome? Это ошибка? Или я что-то не так делаю?