CSS 如何删除超链接图像周围的轮廓?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/814366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:34:19  来源:igfitidea点击:

How can I remove the outline around hyperlinks images?

css

提问by Wasim Shaikh

When we use Text Replacement using CSS and give a negative test-indent i.e. text-indent:-9999px. Then when we click on that link the Dotted line appears like in the sample image below. What's the solution for this?

当我们使用 CSS 使用文本替换并给出负面测试缩进时,即text-indent:-9999px. 然后,当我们单击该链接时,虚线会出现在下面的示例图像中。对此有什么解决方案?

enter image description here

在此处输入图片说明

回答by Discover

For Remove outline for anchor tag

对于删除锚标记的轮廓

a {outline : none;}

Remove outline from image link

从图像链接中删除轮廓

a img {outline : none;}

Remove border from image link

从图像链接中删除边框

img {border : 0;}

回答by Dean Burge

You can use the CSS property "outline" and value of "none" on the anchor element.

您可以在锚元素上使用 CSS 属性“outline”和“none”值。

a {
outline: none;
}

Hope that helps.

希望有帮助。

回答by Nathan Moinvaziri

For Internet Explorer 9:

对于 Internet Explorer 9:

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

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

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

回答by Wolfr

Please note that the focus styles are there for a reason: if you decide to remove them, people who navigate via the keyboard only don't know what's in focus anymore, so you're hurting the accessibility of your website.

请注意,焦点样式的存在是有原因的:如果您决定删除它们,那么通过键盘导航的人将不再知道焦点是什么,因此您会损害网站的可访问性。

(Keeping them in place also helps power users that don't like to use their mouse)

(将它们固定到位也有助于不喜欢使用鼠标的高级用户)

回答by Mike

There is the same border effect in Firefoxand Internet Explorer (IE), it becomes visible when you click on some link.

FirefoxInternet Explorer (IE) 中有相同的边框效果,当您单击某个链接时它会变得可见。

This code will fix just IE:

此代码将仅修复 IE:

a:active { outline: none; }.

And this one will fix both Firefox and IE:

这将修复 Firefox 和 IE

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

Last code should be added into your stylesheet, if you would like to remove the link borders from your site.

如果您想从站点中删除链接边框,应将最后的代码添加到您的样式表中。

回答by Mike

include this code in your style sheet

将此代码包含在您的样式表中

img {border : 0;}

a img {outline : none;}

回答by jagb

I hope this is useful to some of you, it can be used to remove outline from links, images and flash and from MSIE 9:

我希望这对你们中的一些人有用,它可用于从链接、图像和 Flash 以及 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:

如果你想支持 Firefox 3.6.8 但不支持 Firefox 4...点击输入 type=image 也可以产生一个虚线轮廓,要在旧版本的 Firefox 中删除它,以下将起作用:

   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:

IE 9 在某些情况下不允许删除链接周围的虚线轮廓,除非您在页面之间和页面中包含此元标记:

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

回答by Sambruce Sam

This is the latest one that works on Google Chrome

这是适用于 Google Chrome 的最新版本

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

回答by BERGUIGA Mohamed Amine

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

为了删除虚线大纲链接,您可以在 css 文件中写入:

a {
   outline: 0;
}

回答by 151291

Use Like This for HTML 4.01

像这样使用 HTML 4.01

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

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