Html 图标的CSS背景位置仅显示最后一个图标更多详细信息，请参见代码

这是我的HTML，用于显示回复、转发和收藏的图标栏

<div id="twitter-actions" style="display: none; opacity: 0; margin-top: -20px;">
   <div class="intent" id="intent-reply"><a href="https://twitter.com/intent/tweet?in_reply_to=481493696643608576" title="Reply"></a></div>
   <div class="intent" id="intent-retweet"><a href="https://twitter.com/intent/retweet?tweet_id=481493696643608576" title="Retweet"></a></div>
   <div class="intent" id="intent-fave"><a href="https://twitter.com/intent/favorite?tweet_id=481493696643608576" title="Favourite"></a></div>
</div>

问题只是最后一个图标出现，我自己无法解决问题，所以请您提供尽可能多的详细信息

---

如果这仍然不起作用，我建议使用您的“Inspect Element”功能（在大多数现代浏览器上可用）查看是否有任何CSS覆盖了您在此处编写的内容（看起来是这样的），因为隔离您提供的代码似乎工作正常

---

此外，浏览器插件可以影响页面的显示方式。尤其是广告屏蔽者。试试看这是否能解决问题

你能发布一个实时链接吗？或者试着在codepen上重现这个问题？对我来说似乎很好：示例中的HTML和CSS似乎很好，您可能想隔离整个块，看看有什么冲突。我从j query生成了这个HTML代码，它是一个php文件，与我从inspect元素获取的代码相同。感谢您的输入，当然，我很快会发布更多详细信息检查是的，我已经尝试过检查元素功能它没有被覆盖你能发布一个链接到页面吗？如果需要的话，你可以给我发消息。是的，我已经尝试过检查元素功能。如果它被覆盖了，它不会被覆盖。它应该适用于所有元素，作为收藏夹工作正常，谢谢你的输入。我会很快发布整篇文章。很抱歉，它是本地主机，目前我无法访问。一旦我可以访问，我会发布它。你的JSFIDLE在任何方面都适合我。有可能是浏览器插件使其无法正确显示。

#twitter-actions {
    width:75px;
    float:right;
    margin-right:5px;   
    margin-top:3px;
        display:none;
}
.intent {
    width:25px;
    height:16px;
    float:left; 
}
.intent a{
    width:25px;
    height:16px;
    display:block;
    background-image:url(../images/tweet-actions.png);
    float:left; 
} 
.intent a:hover{
    background-position:-25px 0px;
} 


#intent-reply a{
    background-position:0px 0px;
} 
#intent-reply a:hover{
    background-position:-25px 0px;
} 

#intent-retweet a{
    background-position:0px -17px;
} 
#intent-retweet a:hover{
    background-position:-25px -17px;
} 
#intent-fave a{
    background-position:0px -36px;
} 
#intent-fave a:hover{
    background-position:-25px -36px;
}