Относительное расположение изображений, завернутых в теги привязки, приводит к появлению «призрачных» ссылок.

Question

Относительное расположение изображений, завернутых в теги привязки, приводит к появлению «призрачных» ссылок.

0

У меня странная проблема, происходящая на веб-сайте, который я разрабатываю, когда вы просматриваете его в 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; }

Кто-нибудь знает, что вызывает это? Это проблема с позиционированием, пробелом или чем-то еще?

Simon Adcock 26 окт. 2013, в 15:06

Источник

0

Я бы предпочел расположить теги <a> относительно, а не внутри <img> . Кстати, вы можете видеть «призрачные» ссылки даже в chrome, когда осматриваете элемент.
techfoobar 26 окт. 2013, в 12:45

Теги:

html

css

css-position

1 ответ

Ещё вопросы

Я бы предпочел расположить теги <a> относительно, а не внутри <img> . Кстати, вы можете видеть «призрачные» ссылки даже в chrome, когда осматриваете элемент.

Mihey Egoroff · Accepted Answer · 2013-10-26T10-46-00.000Z

У вас то же самое в хроме. Чтобы исправить это, примените ваш 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;
}

Посмотрите на скриншот, как это работает:

Очень приятно, спасибо за вашу помощь :)