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

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

---

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 */
    }

The code below is able to hide image border:

    img {
    border: 0;
    }

If you would like to support Firefox 3.6.8 but not Firefox 4... Clicking down on an input type=image can produce a dotted outline as well, to remove it in the old versions of firefox the following will do the trick:

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

IE 9 doesn't allow in some cases to remove the dotted outline around links unless you include this meta tag between and in your pages:

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

---

This is the latest one that works on Google Chrome

:link:focus, :visited:focus {outline: none;}

---

-moz-user-focus: ignore; in Gecko-based browsers (you may need !important, depending on how it's applied)

---

Use Like This for HTML 4.01

<img src="image.gif" border="0">

---

You can put overflow:hidden onto the property with the text indent, and that dotted line, that spans out of the page, will dissapear.

I've seen a couple of posts about removing outlines all together. Be careful when doing this as you could lower the accessibility of the site.

a:active { outline: none; }

I personally would use this attribute only, as if the :hover attribute has the same css properties it will prevent the outlines showing for people who are using the keyboard for navigation.

Hope this solves your problem.

---

in order to Removing The Dotted Outline href link you can write in your css file:

a {
   outline: 0;
}

---

I would bet most users aren't the type of user that use the keyboard as a navigation control. Is it then acceptable to annoy the majority of your users for a small group that prefers to use keyboard navigation? Short answer — depends on who your users are.

Also, I don't see this experience in the same way in Firefox and Safari. So this argument seems to be mostly for IE. It all really depends on your user base and their level of knowledge — how they use the site.

If you really want to know where you are and you are a keyboard user, you can always look at the status bar as you key through the site.

---

This works perfectly for me

a img {border:none;}

---

Any image that has a link will have a border around the image to help indicate it is a link with older browsers. Adding border="0" to your IMG HTML tag will prevent that picture from having a border around the image.

However, adding border="0" to every image would not only be time consuming it will also increase the file size and download time. If you don't want any of your images to have a border, create a CSS rule or CSS file that has the below code in it.

img { border-style: none; }

---

I'm unsure if this is still an issue for this individual, but I know it can be a pain for many people in general. Granted, the above solutions will work in some instances, but if you are, for example, using a CMS like WordPress, and the outlines are being generated by either a plugin or theme, you will most likely not have this issue resolved, depending on how you are adding the CSS.

I'd suggest having a separate StyleSheet (for example, use 'Lazyest StyleSheet' plugin), and enter the following CSS within it to override the existing plugin (or theme)-forced style:

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

Adding '!important' to the specific rule will make this a priority to generate even if the rule may be elsewhere (whether it's in a plugin, theme, etc.).

This helps save time when developing. Sure, you can dig for the original source, but when you're working on many projects, or need to perform updates (where your changes can be overridden [not suggested!]), or add new plugins or themes, this is the best recourse to save time.

Hope this helps...Peace!

---

Yes we can use. CSS reset as a {outline:none} and also

---

a:focus, a:active {outline:none} for the Best Practice in Resetting CSS, The Best Solution is using common :focus{outline:none} If you still have Best Option please Share

참고 URL : https://stackoverflow.com/questions/814366/how-can-i-remove-the-outline-around-hyperlinks-images