Html 用锚定标签包裹的相对定位图像导致；“鬼魂”；链接

当我在Firefox中浏览时，我正在开发的网站上发生了一个奇怪的问题。我在绝对定位的容器中使用相对定位的图像链接

定位和链接工作得很好，但当我在Firebug中检查时，我得到了这些“鬼”链接，它们出现在图像出现的位置，如果它们没有被重新定位的话。。。如果这有意义的话：

HTML:

---

有人知道这是什么原因吗？这是定位、空白或其他方面的问题吗？

在chrome中也有同样的问题。 要解决此问题，请将css应用于

#标志a{
位置：相对位置；
显示：内联块；
宽度：53px；
高度：53px；
}
#标志。圆圈1{
顶部：105px；
左：115px；
}
#标志。圆圈2{
顶部：33px；
左：147px；
}

---

请看屏幕截图：我宁愿相对地定位

标记，而不是

中的

。顺便说一句，你可以看到“鬼”链接，甚至在铬当你检查元素。

<div id="container">
    <div id="logo">
        <a href="https://soundcloud.com/haelu"><img src="Button1.png" alt="Soundcloud" title="Soundcloud" class="button" id="soundcloud-button" /></a>
        <a href="/videos.html"><img src="Button1.png" alt="Videos" title="Videos" class="button" id="videos-button" /></a>
    </div> <!-- /logo -->
</div> <!-- /container -->

<div id="container">
    <div id="logo">
        <a href="https://soundcloud.com/haelu" class="circle1">
           <img src="Button1.png" alt="Soundcloud" title="Soundcloud"/>
        </a>
        <a href="/videos.html" class="circle2">
           <img src="Button1.png" alt="Videos" title="Videos" />
        </a>
    </div> <!-- /logo -->
</div> <!-- /container -->

#logo a {
  position: relative;
  display: inline-block;
  width: 53px;
  height: 53px;
}

#logo .circle1 {
  top: 105px;
  left: 115px;
}
#logo .circle2{
  top: 33px; 
  left: 147px;
}