[css] 하이퍼 링크 이미지 주위의 윤곽선을 제거하려면 어떻게해야합니까?

Program / 글쓴이

CSS를 사용하여 Text Replacement를 사용하고 부정적인 test-indent ie를 줄 때 text-indent:-9999px. 그런 다음 해당 링크를 클릭하면 아래 샘플 이미지와 같이 점선이 나타납니다. 이것에 대한 해결책은 무엇입니까?

여기에 이미지 설명 입력

답변

앵커 태그의 윤곽선 제거

a {outline : none;}

이미지 링크에서 윤곽선 제거

a img {outline : none;}

이미지 링크에서 테두리 제거

img {border : 0;}

답변

앵커 요소에서 CSS 속성 “outline”및 “none”값을 사용할 수 있습니다.

a {
outline: none;
}

도움이 되었기를 바랍니다.

답변

Internet Explorer 9의 경우 :

a:active, a:focus {
 outline: none;
 ie-dummy: expression(this.hideFocus=true);
}

출처 : http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

답변

포커스 스타일에는 이유가 있습니다. 제거하기로 결정한 경우 키보드를 통해 탐색하는 사람들은 더 이상 포커스가있는 항목 만 알지 못하므로 웹 사이트의 접근성이 손상됩니다.

(그들을 제자리에두면 마우스를 사용하지 않는 고급 사용자에게도 도움이됩니다)

답변

Firefox 와 Internet Explorer (IE) 에서 동일한 테두리 효과가 있습니다. 가 있으며 일부 링크를 클릭하면 표시됩니다.

이 코드는 IE 만 수정합니다.

a:active { outline: none; }.

그리고 이것은 Firefox와 IE를 모두 수정합니다 .

:active, :focus { outline: none; -moz-outline-style: none; }

사이트에서 링크 테두리를 제거하려면 마지막 코드를 스타일 시트에 추가해야합니다.

답변

이 코드를 스타일 시트에 포함 

img {border : 0;}

a img {outline : none;}

답변

이 기능이 일부 사용자에게 유용하기를 바랍니다. 링크, 이미지 및 플래시 및 MSIE 9에서 윤곽선을 제거하는 데 사용할 수 있습니다.

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

아래 코드는 이미지 테두리를 숨길 수 있습니다.

    img {
    border: 0;
    }

Firefox 3.6.8을 지원하지만 Firefox 4는 지원하지 않으려는 경우 … 입력 type = image를 클릭하면 점선 윤곽선도 생성 될 수 있습니다. 이전 버전의 firefox에서 제거하려면 다음과 같이하십시오. 

   input::-moz-focus-inner {
   border: 0;
   }

IE 9에서는 페이지 사이와 페이지 사이에이 메타 태그를 포함하지 않는 한 링크 주변의 점선을 제거 할 수없는 경우가 있습니다.

     <meta http-equiv="X-UA-Compatible" content="IE=9" />