CSS Sprite не корректно отображает браузер

Вот мой спрайт: http://crystalise.tw/crystaliseTW/icons/sprite.png

Когда я пробую это на сайте, как здесь: http://crystalise.tw

Он не отображается правильно, когда я использую браузер Firefox и Chromium.

В чем проблема?

Это из моего CSS:

.sprite { background: url('../icons/sprite.png') no-repeat top left; width: 64px; height: 64px; } 
.sprite.blogger { background-position: 0px 0px; } 
.sprite.flickr { background-position: 0px -64px; } 
.sprite.github { background-position: 0px -128px; } 
.sprite.heart { background-position: 0px -192px; } 
.sprite.linkedin { background-position: 0px -256px; } 
.sprite.magnolia { background-position: 0px -320px; } 
.sprite.pinterest { background-position: 0px -384px; } 
.sprite.skype { background-position: 0px -448px; } 
.sprite.so { background-position: 0px -512px; } 
.sprite.youtube_64 { background-position: 0px -576px; }
1 ответ

Проблема в том, что ваш навигатор имеет ширину всего 700 пикселей. У вас есть 10 навигационных элементов, каждый из которых имеет 64px (ширина) + 22px (margin), это составляет 860px в ширину, 160px слишком велико. Я бы порекомендовал уменьшить правые поля nav> div или увеличить ширину вашего навигатора. Наконец, ваш последний div на nav, вероятно, не нуждается в правом поле, поэтому используйте что-то вроде этого: nav> div: last-child {margin-right: 0; } }

licensed under cc by-sa 3.0 with attribution.