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; }