html - Relatively positioning images wrapped in anchor tags cause "ghost" links

Question

I have a strange issue happening on a website I'm developing, when viewed in Firefox. I'm using relatively-positioned image links within an absolutely-positioned container.

The positioning and links work fine, but when I inspect in Firebug, I get these "ghost" links that appear in the locations where the images would have appeared had they not been re-positioned... if that makes any sense:

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

Does anyone know what is causing this? Is it a problem with positioning, or whitespace, or something else?

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

看截图它是如何工作的：