CSS связанные изображения подчеркнуты (отображение "a" заблокировано)

Question

У меня есть меню, для которого я хотел, чтобы все пространство вокруг текста, внутри каждого отдельного элемента, позволяло пользователю перейти на указанную страницу. Я посмотрел в Интернете и обнаружил, что наилучшим решением является блокировка дисплея "a" следующим образом:

a {
    display: block;
    height: 100%;
    text-decoration: underline;
}

Мне удалось сделать это отлично, но я хочу поместить изображения в некоторые из них - например, значок календаря для опции событий. Я заметил, что теперь это тоже подчеркивает ссылки. Есть ли способ избавиться от этого? У ссылок для отступа вправо установлено значение 5px, если это помогает сузить причину / решение.

Таким образом, весь соответствующий код выглядит следующим образом:

a {
    display: block;
    height: 100%;
    text-decoration: underline;
}
a > img {
    text-decoration: none;
    border: none;
    padding-right: 5px;
    width: 1.8em;
    height: 1.8em;
}

Заранее большое спасибо.

С уважением,

Richard

PS Это проблема Google Chrome, в настоящее время я не проверял ее ни в каких других браузерах.

Answer 1

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

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

a > img {
    float: left;
    border: none;
    padding-right: 5px;
    width: 1.8em;
    height: 1.8em;
}

Answer 2

Я думаю, что ваш лучший вариант - избавиться от подчеркивающего свойства украшения текста для элемента a, поместить текст ссылки в span с общим классом и применить text-decoration: underline к этому классу.

Answer 3

Я бежал в том же сомнении.text-decoration, установленный на none, работает для меня:

<a href="..." style="text-decoration:none;">
    <img src="...">
</a>

Как было сказано выше, вы можете использовать класс, чтобы сделать это более общим.Это выглядит совершенно странно на моем сайте, когда я увидел минус в нижней части изображений.Тогда я понимаю, что это было основание.