CSS雪碧沒有在瀏覽器中渲染正確

Question

這裏是我的雪碧： 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; } 

Answer 1

的問題是你的資產淨值僅700像素寬。 您有10個導航條，每條寬64px（寬）+ 22px（寬），總寬860px，160px太大。 我建議減少nav> div元素的右邊距，或增加導航的寬度。 最後，您在導航中的最後一個div可能不需要右邊距，所以請使用類似下面的內容： nav> div：最後一個孩子{margin：0; margin-right：0; }