css sprites - зависание с некорректно загружаемыми изображениями

Question

У меня есть несколько спрайтов css на моем сайте в заголовке, но когда страница загружается, она часто загружает несколько из 8 отдельных изображений чуть ниже того места, где они должны быть.Затем я подожду несколько секунд или наведу на них указатель мыши, и он вернется в правильные позиции.

Вот мой CSS:

.x {
display: inline-block }
.x a {
display:block;
width:100px;
height:100px;
overflow:hidden;}
.x a:hover img {
margin-left:-100px;}

, а затем HTML-код выглядит так:

<div class='x'><a href='link' alt='y'><img src=
'image' /></a></div> &nbsp;
<div class='x'><a href='link' alt='y'><img
src='image' />
</a></div>

для 8 отдельных квадратов 100x100 подряд.

Answer 1

Способ определения CSS-спрайта немного отличается от того, как вы это делаете.

Вот пример того, как этого можно достичь.

/* This is how to define a main image
.sprite { background: url("../link/to/spriteimage.png") 0px 0px; width: 32px; height: 32px; }

/* Assign an image like this way, by changing the position
.sprite.icon1 { background-position: -32px -32px; }
.sprite.icon1_hover { background-position: -64px -32px; }

Демо