Подчеркивание между двумя изображениями

У меня есть следующий код HTML внутри div:

<a href="#" onclick="location.href='http://www.mysql.com'; return false;">
<img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/>
</a>
<a href="#" onclick="location.href='http://www.php.net'; return false;"> 
<img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/>
</a>

В результате получается следующий вывод с подчеркиванием!? между ними:

Если я использую только одну ссылку на изображение, подчеркивание исчезает.

Почему это происходит и как я могу избавиться от подчеркивания?

Ответ 1

Подчеркиванием является одно или несколько подчеркнутых пробелов. Исправление состоит в том, чтобы удалить все, что может быть принято как пространство внутри элемента a, например, разрыв строки. Разрыв строки и другие пробелы в теге (между < и >) в порядке, хотя:

<a href="http://www.mysql.com"><img src="images/php-power-micro2.png" 
  alt="PHP powered" border="0" title="PHP" /></a>
<a href="http://www.php.net"><img src="images/mysql-power.jpg"
  alt="MySQL powered" border="0" title="MySQL"/ ></a>

Это означает, что между элементами a все еще существует разрыв строки, и браузеры обычно рассматривают его как пространство. В этом случае это, вероятно, не имеет значения, поскольку пространство находится вне элементов a и, следовательно, не будет подчеркнуто; это просто приводит к небольшому интервалу. Но чтобы сделать изображения более четкими, рассмотрим добавление padding-left во второй элемент a.

Ответ 2

"Подчеркивание" на самом деле подчеркивает тег "a". Это стиль, используемый браузерами для указания гиперссылки. Чтобы избавиться от подчеркивания, но сохраните гиперссылку, создайте тег 'a'.

a{text-decoration:none;}

У вас, вероятно, будут и другие ссылки на странице, поэтому неплохо дать этим ссылкам класс, чтобы их можно было разделить отдельно.

<a class="imageLink" href="http://www.mysql.com">
  <img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/>
</a>
<a class="imageLink" href="http://www.php.net"> 
  <img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/>
</a>

И затем сделайте что-то вроде этого:

a.imageLink{
    text-decoration:none;
}

В качестве альтернативы вы можете использовать встроенные стили:

<a style="text-decoration:none;" class="imageLink" href="http://www.mysql.com">

Извиняюсь, если вы уже знаете это, и это кажется очевидным, я просто хотел дать ясный ответ.:)

Ответ 3

Удалите пробел между начальным и конечным тегами якорей и изображений, которые они содержат.

Ответ 4

Вы можете либо удалить украшение текста, используя следующий css

a
{
text-decoration: none;
}

или вы можете удалить пробел между изображением и тегами привязки.

Оба исправят проблему

Ответ 5

Удаление text-decoration для тегов a достаточно - не нужно уменьшать читаемость вашей разметки, удаляя строки и отступы.

Но не забудьте удалить этот стиль для hover тоже:

a, a:hover
{
    text-decoration: none;
}