包含在锚标签中的相对定位图像导致“鬼”链接

Question

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

定位和链接工作正常，但是当我在Firebug中进行检查时，如果没有重新定位，我会在图像出现的位置出现这些“鬼”链接...如果这有任何意义：

HTML：

<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 -->

CSS：

#container {
   position: absolute;
   top: 50%;
   margin-top: -85px;
   left: 0;
   width: 100%;
}

#logo {
    background-image: url('logo1.png');
    width: 393px;
    height: 170px;
    margin: 0 auto;
}

.button { width: 53px; height: 53px; position: relative; }
#soundcloud-button { top: 105px; left: 115px; }
#videos-button  { top: 33px; left: 147px; } 

有谁知道造成这种情况的原因是什么？这是定位，空白或其他什么问题吗？

Answer 1

你在chrome中也是一样的。 要解决此问题，请将您的css应用于<a>标记，而不是<img>内的<a>。例如，设置2个班级来调整他们的位置，.circle1和.circle2。

<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;
}

查看屏幕截图的工作原理：