Html CSS精灵在浏览器中呈现不正确

这是我的精灵：

当我在这样的网站上尝试时：

当我使用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;  } 

---

问题是你的导航只有700像素宽。 您有10个导航项目，每个都是64px（宽度）+22px（边距）宽，总计为860px宽，160px太大。 我建议减少nav>div元素的右边距，或者增加nav的宽度。 最后，您在nav中的最后一个div可能不需要右边距，因此请使用以下方法： 导航>分区：最后一个孩子{ 右边距：0；

---

}

在哪里可以找到

Chromium

浏览器？它在哪个浏览器中正常工作？在Opera中也不能正常工作。你能粘贴整个HTML和CSS吗？这样我们就可以好好看看了？你的CSS一点帮助都没有。谢谢！我自己从来没有想过^_^