这是我的雪碧:
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; }
最佳答案
问题是您的导航只有700px宽。
您有10个导航项目,每个导航项目的宽度分别为64像素(宽度)+ 22像素(边距),总计860像素(宽),160像素(太大)。
我建议减少nav> div元素的右边距,或增加nav的宽度。
最后,您在导航中的最后一个div可能不需要右边距,因此请使用以下内容:
导航> div:最后一个孩子{
右边距:0;
}