CSS Sprite在浏览器中无法正确呈现

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

问题是你的导航只有700px宽。 你有10个导航项目，每个64px（宽度）+ 22px（边距）宽，总宽度为860px，160px太大。 我建议减少导航的右边距＆gt; div元素，或增加导航的宽度。 最后，导航中的最后一个div可能不需要右边距，所以请使用以下内容：     导航＆gt; div：last-child {         margin-right：0;     }