如何删除超链接图像的轮廓？

当我们使用文本替换使用CSS并给出一个负测试缩进，即text-indent:-9999px。然后，当我们点击该链接时，虚线出现在下面的示例图像中。这有什么解决方案？如何删除超链接图像的轮廓？

2009-05-02 Wasim Shaikh

请不要删除它，它是为了可访问性。 – 2012-01-18 08:03:20

+13

http://outlinenone.com/ – 2012-01-18 08:05:30

Duplicate：http://stackoverflow.com/questions/1142819/how-to-remove-dotted-border-around-active-hyperlinks-in-ie8-with-css *（但请参阅上面的辅助功能注释！）* – JohnB 2012-06-07 22:47:47

126

对于删除大纲锚标记

a {outline : none;}

从图像链接删除轮廓

a img {outline : none;}

取下图像链接

img {border : 0;}

来源

2011-02-14 16:25:24 Discover

您可以在定位元素上使用CSS属性“无”的“纲要”和值。

a { 
outline: none; 
}

希望有帮助。

来源

2009-05-02 07:47:06

请参阅问题的评论。 – 2012-01-18 08:05:49

-moz-user-focus: ignore;基于Gecko的浏览器（您可能需要！重要的是，这取决于它如何应用）

来源

2009-05-02 07:58:41 Anonymous

-9

是的，我们可以使用。 CSS重置为a {outline:none}也

a:focus, a:active {outline:none} 在重置CSS的最佳实践，最好的办法是使用普通:focus{outline:none}如果您仍然有最好的选择，请与我们分享

来源

2009-05-02 08:15:03

+20

难道不接受其他答案之一，其内容导致你得出你的结论吗？ – 2010-08-21 14:27:25

有一个在相同的边框效果Firefox和Internet Explorer（IE），当您点击某个链接时，它变得可见。

该代码将修复只是IE：

a:active { outline: none; }.

而这一次将修复Firefox和IE：

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

末代码应该添加到您的样式表，如果您想从您的网站删除链接边框。

来源

2009-05-02 13:42:46 Mike

感谢迈克，这一个是真的很好的答案。但使用-moz-outline-style：none;不是有效的CSS。仍然这是一个好选择 – 2009-05-03 17:05:09

请注意，重点风格是有原因的：如果你决定删除它们，通过键盘导航的人不会知道什么焦点了，所以你伤害了你的网站的可访问性。

（保持他们在的地方还可以帮助电力用户不喜欢用自己的鼠标）

来源

2009-05-02 22:52:06 Wolfr

我们不删除：焦点风格。只是增加风格大纲：没有。其他默认样式将在那里。 – 2009-05-03 17:06:18

你可以把overflow:hidden到与文本缩进，而虚线的财产，跨越了页，会消失。

我见过几篇关于删除轮廓的帖子。这样做时要小心，因为可能会降低网站的可访问性。

a:active { outline: none; }

我个人会用这个属性只，仿佛:hover属性具有相同的CSS属性它会阻止显示了谁正在使用键盘导航人的轮廓。

希望这可以解决您的问题。

来源

2009-07-31 03:54:07

边界对于Internet Explorer 9：

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

来源

2012-01-25 07:20:35

我敢打赌大多数用户都没有使用键盘作为导航控件的用户类型。惹恼大多数用户是否喜欢使用键盘导航？简短的答案 - 取决于你的用户是谁。

另外，我没有在Firefox和Safari中以相同的方式看到这种体验。所以这个观点似乎主要针对IE。这一切都取决于您的用户群和知识水平 - 他们如何使用该网站。

如果你真的想知道你在哪里，你是一个键盘用户，你可以随时通过网站键入状态栏。

来源

2012-05-14 20:17:10 Dwall

这完全适用于我

a img {border:none;}

来源

2013-02-26 10:05:01

包括在样式表的代码

img {border : 0;} 

a img {outline : none;}

来源

2013-08-22 06:25:14

使用这样的HTML 4.01

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

来源

2013-11-24 14:59:49 151291

任何影像有一个链接将在图像周围有一个边框可以帮助指示它与旧版浏览器的链接。将边框=“0”添加到IMG HTML标记将防止该图片在图像周围有边框。

但是，添加边框=“0”到每一个形象将不仅耗时也会增加文件大小和下载时间。如果您不希望任何图像具有边框，请创建一个包含下面代码的CSS规则或CSS文件。

img {border-style：none; }

来源

2014-02-17 06:21:18

我希望这是你们中的一些有用的，它可以被用来从链接，图像和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 */ 
    }

下面的代码是能够隐藏图像边界：

img { 
    border: 0; 
    }

如果你想支持Firefox 3.6.8，但不支持Firefox 4 ...点击下对输入型=图像可以产生虚线轮廓为好，将其删除旧版本的Firefox下面将做的伎俩：

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

IE 9不能在某些情况下允许移除围绕链接虚线轮廓，除非你有之间，并在页面此meta标签：

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

来源

2014-05-26 13:09:47 jagb

这是为了在谷歌浏览器

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

来源

2015-12-01 16:02:26

工程Removi最新的一个ng你可以在你的css文件中写入虚线轮廓href链接：

a { 
    outline: 0; 
}

来源

2016-05-31 07:56:43

如何删除超链接图像的轮廓？

回答

相关问题