0

開発中の Web サイトを 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; }

誰がこれを引き起こしているのか知っていますか? 配置、空白、またはその他の問題ですか?

4

1 に答える 1

1

クロムでも同じです。これを修正するには、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;
}

それがどのように機能するかのスクリーンショットを見てください：ここに画像の説明を入力

于 2013-10-26T12:55:14.787 に答える