앵커로 감싼 이미지에서 밑줄을 제거하려면 어떻게합니까?

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.image-link { 
    border-bottom-style: none; 
} 

:

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

이 그런 다음 CSS에서 해당 링크에서 테두리를 제거 : 그 안에서 이미지가 모든 링크에 클래스

JavaScript가 활성화되어있을 때만 작동합니다.

Answer 4

이 시도 :

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

그것은 상단에 이미지 아래에 밑줄을 이동합니다.