html - 包裹在 anchor 标签中的相对定位图像导致 "ghost"链接

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

看看截图是如何工作的: