Проблемы CSS Sprite

Question

Я пытаюсь настроить некоторые CSS-спрайты, все они работают одинаково, за исключением того, что у каждого свой фон. Это прекрасно работает в любом браузере в OS X, но не работает в Firefox для Windows и Linux или IE. В частности, часть, которая не работает, - зависание.

CSS

    .sprite {
        background-position: 0px 0px;
        position: relative;
        padding-right: 25px;
        width: 80px; 
        height: 86px;
        float: left;
    }

    .sprite.videos { 
        background: url('images/button-videos-sprite.png') no-repeat top left; 
    } 

    .sprite.music { 
        background: url('images/button-music-sprite.png') no-repeat top left; 
    } 

    .sprite.twitter { 
        background: url('images/button-twitter-sprite.png') no-repeat top left; 
    } 

    .sprite.facebook { 
        background: url('images/button-facebook-sprite.png') no-repeat top left; 
    } 

    .sprite:hover { 
        background-position: 0px -86px; 
    } 

HTML

            <a href="...">
                <div class='sprite videos'></div>
            </a>

            <a href="...">
                <div class='sprite music'></div>
            </a>

            <a href="...">
                <div class='sprite facebook'></div>
            </a>

            <a href="...">
                <div class='sprite twitter'></div>
            </a>

EDIT

Я только что перешел с FF 4 на 8, и теперь все работает в FF, но в IE нет шансов. Я смущен тем, что эта строка должна заканчиваться даже в Chrome:

    .sprite:hover { 
        background-position: 0px -86px; 
    } 

Может кто-нибудь сказать мне, почему?

Answer 1

В зависимости от используемой версии проблема может заключаться в том, что вы пытаетесь использовать :hover для div <div>, а не для ссылки <a>.

Answer 2

Вы не можете поместить элемент <div> внутрь элемента <a>.Это одна из проблем проверки вашего кода.Правильный подход - поместить <a> внутрь <div>:

<div><a href="#"></a></div>

Answer 3

Я бы порекомендовал изменить ваш CSS следующим образом:

.sprite {
    background: transparent none no-repeat 0px 0px; /* full shorthand */
    position: relative;
    padding-right: 25px;
    width: 80px; 
    height: 86px;
    float: left;
}

И затем для каждого .sprite.xxxx блока сделайте:

.sprite.videos { 
    background-image: url('images/button-videos-sprite.png'); /* override just the background-image... */
    background-position: top left; /* ... and the background-position */
} 

И оставьте блок .sprite:hover без изменений:

.sprite:hover { 
    background-position: 0px -86px; 
}