CSS中的分割图像？

我试图在tumblr页面上编辑一些CSS，但图标有问题。这是最右边的Twitter图标

上面显示为在页面上一分为二

我对所有四个图标都使用了下面的代码，只是每个图像都有一个不同的url，但我不知道为什么Twitter会这样分割

原因可能是什么？我如何解决？ 代码：

#above-nav-links a.twitter:before {
    background-image: url(http://imgh.us/twitter_icon_blue.svg);
    content: ' ';
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 3px;
    repeat: no-repeat;
}

---

如果复制粘贴背景图像url，您可以看到我用于图标的图像，但它没有拆分。我用于其他图标的页面在间距、大小等方面类似。

由于我没有看到您的代码，您可以相应地更改代码

<ul id="#icons">
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
</ul>

---

根据我的图标图像设置背景位置。您可能需要根据图像进行调整。

尝试添加浮动：左；从理论上讲，有人知道为什么重复：没有重复行吗？这是主题的默认代码的一部分，但repeat似乎不是CSS属性。此外，虽然设置为“无重复”，但如果更改图像的宽度和高度，我可以看到它仍然重复。尽管如此，编辑器仍然会像其他属性一样突出显示它。请用HTML和CSS显示您的完整代码，以便我们更好地理解错误所在。您的代码有1607行，因此太长，无法发布。你需要看哪一部分？好的，让我给你写一些代码。希望你能相应地修改你的代码。背景位置：左似乎可以，谢谢！我在“重复”下的行中添加了它。float:left不起作用。注意：@Abdul您编辑了您的回复，但原始回复起作用您建议的背景位置：left。不过我想你把那部分去掉了。否则我会点击复选标记！实际上，在处理分割图像时，我试图给出一个更好的主意。背景位置左是好的，但它更好地告诉准确的位置图像分割图像。休息由你决定。

<style type="text/css">
#icons > li
{
    display: inline-block;
    list-style:none;
    float:left;
}
#icons > li > a
{
    background-image: url("icons.png");
    width: 25px;
    display: inline-block;
    height: 25px;
    repeat: no-repeat;
}
#icons > li:nth-child(1) > a
{
    background-position:2px -8px;
}
#icons > li:nth-child(2) > a
{
    background-position:-29px -8px;
}
#icons > li:nth-child(3) > a
{
    background-position:-61px -8px;
}
#icons > li:nth-child(4) > a
{
    background-position:-97px -7px;
}
</style>