Удалить строку под изображением в ссылке

У меня есть несколько случаев, когда я помещаю изображение в ссылку. Обычно, если вы устанавливаете border = "0", линия по ссылке не относится к изображению. Однако мне нужно было указать DOCTYPE как , а теперь в FF я вижу строку под всеми изображениями.

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

<a href="link.php"><img src="img.png" height="16" width="16" border="0"> link</a>

Я попытался решить эту проблему с помощью CSS, добавив

a img {
    text-decoration:none
}

К сожалению, это не сработало. Я также пробовал:

a img {
    border:0
}

IE не "подчеркивает" мои изображения в пределах ссылки... Любые предложения будут высоко оценены.

Пример ссылки

enter image description here

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

Ответы

Ответ 1

В случае, если кто-то заботится, вот альтернативное решение, с которым я столкнулся, чтобы обойти проблему:

.nl {
    text-decoration:none;
}
<a href="link.php" class="nl"><img src="img.png" height="16" width="16" border="0"><u>link</u></a>

Ответ 2

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

HTML:

<a href="link.php" class="image-link"><img height="16" width="16" /></a>

CSS

a img
{
  border: 0 none;
}
.image-link
{
  text-decoration: none;
}

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

Решением для этого было бы добавить span вокруг текста внутри якоря:

<a href="link.php" class="image-link"><img height="16" width="16" /> <span>link text here</span></a>

и добавьте дополнительный стиль в таблицу стилей:

.image-link span
{
  text-decoration: underline;
}

Ответ 3

a { text-decoration: none }

Подчеркнуто из тега A, а не IMG

Ответ 4

Решением будет использование изображения в качестве фонового изображения вместо html, возможно, фона родительского элемента a.

Ответ 5

В тех случаях, когда редактирование разметки не является параметром (недоступность для шаблонов и/или окружающих проблем), вы можете использовать небольшое jQuery. Вам может потребоваться настроить синтаксис для переопределения CSS:

jQuery('a > img').parent().css({'text-decoration' : 'none'});

Ответ 6

В теге add добавьте этот код: стиль = "цвет: белый"

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

Ответ 7

Решено

<a href="link.php" style="text-decoration: none"><img src="img.png" height="16" width="16" border="0"> link</a>

Ответ 8

Если вы ссылаетесь на изображение, попробуйте следующее:

a[href$=jpg], a[href$=png] {
    text-decoration: none;
}

Ответ 9

Мои два цента:

$('a').each(function(){
    var images = $(this).find("img");
    images.parent().addClass('no_border_img');
});

Завершите все ссылки и найдите изображения внутри, затем для каждого добавьте стиль CSS в ссылку.

Только для изображения со ссылкой в ​​стиле предыдущей ссылки. Не забудьте создать стиль для 'no_border_image'.