CSS를 사용하여 Text Replacement를 사용하고 부정적인 test-indent ie를 줄 때 text-indent:-9999px. 그런 다음 해당 링크를 클릭하면 아래 샘플 이미지와 같이 점선이 나타납니다. 이것에 대한 해결책은 무엇입니까?
답변:
앵커 태그의 윤곽선 제거
a {outline : none;}이미지 링크에서 윤곽선 제거
a img {outline : none;}이미지 링크에서 테두리 제거
img {border : 0;}Internet Explorer 9의 경우 :
a:active, a:focus {
outline: none;
ie-dummy: expression(this.hideFocus=true);
}포커스 스타일에는 이유가 있습니다. 제거하기로 결정한 경우 키보드를 통해 탐색하는 사람들은 더 이상 포커스가있는 항목 만 알지 못하므로 웹 사이트의 접근성이 손상됩니다.
(그들을 제자리에두면 마우스를 사용하지 않는 고급 사용자에게도 도움이됩니다)
Firefox 와 Internet Explorer (IE) 에서 동일한 테두리 효과가 있습니다. 가 있으며 일부 링크를 클릭하면 표시됩니다.
이 코드는 IE 만 수정합니다.
a:active { outline: none; }.그리고 이것은 Firefox와 IE를 모두 수정합니다 .
:active, :focus { outline: none; -moz-outline-style: 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" />점선 개요 href 링크를 제거하려면 css 파일에 다음과 같이 작성할 수 있습니다.
a {
outline: 0;
}대부분의 사용자는 키보드를 탐색 컨트롤로 사용하는 사용자 유형이 아닐 것입니다. 그렇다면 키보드 탐색을 선호하는 소규모 그룹에 대해 대다수의 사용자를 성가 시게하는 것이 허용됩니까? 짧은 답변 — 사용자가 누구인지에 따라 다릅니다.
또한 Firefox와 Safari에서 동일한 방식으로 이러한 경험을 볼 수 없습니다. 따라서이 주장은 대부분 IE를위한 것 같습니다. 그것은 모두 사용자 기반과 그들의 지식 수준, 즉 사이트를 어떻게 사용하는지에 달려 있습니다.
현재 위치를 정말로 알고 싶고 키보드 사용자 인 경우 사이트를 통해 키를 입력 할 때 항상 상태 표시 줄을 볼 수 있습니다.
이것이이 개인에게 여전히 문제인지 확실하지 않지만 일반적으로 많은 사람들에게 고통이 될 수 있음을 알고 있습니다. 허락하신다면, 위의 솔루션에서 작동 일부 인스턴스하지만, 예를 들어, 워드 프레스 같은 CMS를 사용하여 당신이하는 경우, 그리고 윤곽이 플러그인이나 테마 중 하나에 의해 생성되고, 당신은 가능성이 가장 높은 것 없는 이 문제에 따라 해결 한 CSS를 추가하는 방법.
별도의 StyleSheet (예 : ' Lazyest StyleSheet '플러그인 사용)를 사용하고 그 안에 다음 CSS를 입력하여 기존 플러그인 (또는 테마) 강제 스타일을 재정의하는 것이 좋습니다.
a:hover,a:active,a:link {
outline: 0 !important;
text-decoration: none !important;
}특정 규칙에 ' ! important '를 추가하면 규칙이 (플러그인, 테마 등에 있든 상관없이) 다른 곳에있을 수 있더라도 생성하는 우선 순위가됩니다.
이를 통해 개발 시간을 절약 할 수 있습니다. 물론, 원본 소스를 찾을 수는 있지만 많은 프로젝트에서 작업하거나 업데이트를 수행해야하거나 (변경 사항을 무시할 수있는 [ 제안되지 않음! ]) 새 플러그인 또는 테마를 추가 해야하는 경우 이것이 가장 좋습니다. 시간을 절약 할 수 있습니다.
이것이 도움이되기를 바랍니다 ... 평화!