Как удалить подчеркивание из изображения, завернутого в якорь?

Question

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

Поэтому я предполагаю, что единственный способ исправить это - применить класс CSS ко всем изображениям внутри якорей, чтобы они имели border: none;. Я не знаю, как это сделать. Любой, кто хочет объяснить, возможно ли это? Заранее спасибо.

Answer 1

Попробуйте это:

<style type="text/css"> 
a img { text-decoration: none } // Images within 
</style> 

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

Было бы лучше, чтобы включить подчеркивание для ссылок выключения в целом, определить класс CSS для якорей и включите подчеркивание на в этом классе:

a { text-decoration: none } 
a.my_anchor_class { text-decoration: underline } 

Answer 2

Подчеркнутый объект находится под управлением объекта text-decoration CSS. Так что, если вы хотите включить, что выключен:

a { text-decoration: none; } 

Answer 3

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

$('a:has(img)').addClass('image-link'); 

Затем удалить границу из этих ссылок в CSS:

a.image-link { 
    border-bottom-style: none; 
} 

Это будет работать только при включенном JavaScript.

Answer 4

Попробуйте это:

a img { border:none; vertical-align:top; } 

Он перемещает подчеркивание сверху и снизу изображения.