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
How can I remove the outline around hyperlinks images?
提问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
. 然后,当我们单击该链接时,虚线会出现在下面的示例图像中。对此有什么解决方案?
回答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);
}
来源: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.
在Firefox和Internet 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">