Изображение внутри HTML-якоря создает нежелательный артефакт

У меня есть довольно базовый заголовок, над которым я сейчас работаю, и по неизвестным причинам якоря, у которых есть тег изображения внутри них, создает нежелательный артефакт, как на следующем экране:Изображение внутри HTML-якоря создает нежелательный артефакт

enter image description here Image Link

HTML

<div class="block-content"> 
    <form method="get" id="header-searchform" class="search-form search-button-hidden" action="http://klarparatsy.stof2000.dk/" _lpchecked="1"> 
     <div> 
      <input id="search" class="field" type="text" name="s" value="" placeholder="Indtast søgeord"> 
     </div> 
    </form> 
    <a id="stof2000-logo" href="http://klarparatsy.stof2000.dk/"> 
     <img src="http://klarparatsy.stof2000.dk/wp-content/uploads/2014/09/stof2000logo.png" alt="Stof 2000"> 
    </a> 
    <a id="klarparatsy-logo" href="http://klarparatsy.stof2000.dk/"> 
     <img src="http://klarparatsy.stof2000.dk/wp-content/uploads/2014/09/klarparatsy-logo.png" alt="Stof 2000"> 
    </a> 
    <img id="homemade-logo" src="http://klarparatsy.stof2000.dk/wp-content/uploads/2014/09/homemade-logo.png" alt="Stof 2000"> 
</div>

CSS

#stof2000-logo { 
    position: relative; 
    top: 39px; 
    left: 80px; 
} 
#klarparatsy-logo { 
    position: relative; 
    top: 41px; 
    left: 143px; 
}

Артефакты создаются рядом с границами изображений, и я не вижу проблемы в коде, поэтому любые рекомендации более чем приветствуются. Я знаю, что это небольшая проблема, но на данный момент это очень расстраивает.

источник

2014-10-02 MariusNV

это, вероятно, подчеркивание из 'a href', потому что ссылки всегда являются стандартными подчеркнутыми. позвольте мне найти правильную строку кода, чтобы отключить это. – myfunkyside

try 'text-decoration: none;' – myfunkyside

@myfunkyside - это правильно. Также подумайте о закрытии тегов изображений. ех. '' –

Это подчеркивание от якоря (a href), потому что ссылки всегда являются стандартными подчеркнутыми.

text-decoration:none; следует исправить.

Положите его на два якоря в CSS, например, так:

#stof2000-logo { 
    position: relative; 
    top: 39px; 
    left: 80px; 
    text-decoration:none; 
}

источник

2014-10-02 08:36:43 myfunkyside

Немного больше, чем было бы здорово .... – Ruddy

Это исправить. Черт, это было так просто, но это не проходило через мою голову. Большое спасибо :) – MariusNV

Я был бы очень признателен, если бы вы могли дать мне одну из этих причудливых галочек :) – myfunkyside

анкеры обычно подчеркнуты. Вот почему вы получаете этот «артефакт». Вы можете удалить эту строку из всех якорей на странице с

a {text-decoration: none;}

или даже просто для тех, которые содержат изображения, как это:

#stof2000-logo, 
#klarparatsy-logo { text-decoration: none; }

источник

2014-10-02 08:39:31 SchweizerSchoggi

Прошу прощения, но @myfunkyside был быстрее – MariusNV

На изображениях и связывает это всегда лучше, так что набор изображений к блочным элементам:

.block-content img { 
    display: block; 
    float: left; 
} 

.block-content a, 
.block-content a:link, 
.block-content a:visited { 
    padding: 0; 
}

В стилях непосредственно на img-элементах используйте ширину и отступы для их размещения.

источник

2014-10-02 08:42:38 AndyWizz

Изображение внутри HTML-якоря создает нежелательный артефакт

ответ

Смежные вопросы