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

当我们使用CSS进行文本替换并给出一个负的测试缩进,即text-indent:-9999px。然后,当我们点击该链接时,虚线显示在下面的示例图像中。 这是什么解决方案?

enter image description here

Wasim Shaikh asked 2019-09-11T11:07:51Z
17个解决方案
146 votes

用于删除锚标记的轮廓

a {outline : none;}

从图像链接中删除轮廓

a img {outline : none;}

从图像链接中删除边框

img {border : 0;}
Discover answered 2019-09-11T11:08:20Z
22 votes

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

a {
outline: none;
}

希望有所帮助。

Dean Burge answered 2019-09-11T11:08:45Z
17 votes

对于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]

Nathan Moinvaziri answered 2019-09-11T11:09:16Z
9 votes

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

(保持它们的位置也有助于不喜欢使用鼠标的高级用户)

Wolfr answered 2019-09-11T11:09:49Z
7 votes

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

这段代码只会修复IE:

a:active { outline: none; }.

这个将修复Firefox和IE:

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

如果您要从网站中删除链接边框,则应将最后一个代码添加到样式表中。

Mike answered 2019-09-11T11:10:36Z
5 votes

在样式表中包含此代码

img {border : 0;}

a img {outline : none;}
Roko C. Buljan answered 2019-09-11T11:10:59Z
3 votes

我希望这对你们中的一些人有用,它可以用来从链接,图像和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 ...单击输入type = image也可以生成虚线轮廓,要在旧版本的firefox中删除它,以下方法可以解决问题:

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

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

     <meta http-equiv="X-UA-Compatible" content="IE=9" />
jagb answered 2019-09-11T11:11:44Z
2 votes

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

:link:focus, :visited:focus {outline: none;}
Sambruce Sam answered 2019-09-11T11:12:08Z
1 votes

-moz-user-focus: ignore;在基于Gecko的浏览器中(您可能需要!重要,具体取决于它的应用方式)

Anonymous answered 2019-09-11T11:12:34Z
1 votes

对于HTML 4.01使用Like This

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

151291 answered 2019-09-11T11:13:05Z
1 votes

您可以将overflow:hidden放在带有文本缩进的属性上,并且跨越页面的虚线将消失。

我已经看过一些关于一起删除轮廓的帖子。 这样做时要小心,因为您可能会降低网站的可访问性。

a:active { outline: none; }

我个人只会使用此属性,就好像:hover属性具有相同的css属性一样,它将阻止为使用键盘进行导航的人显示轮廓。

希望这能解决你的问题。

aksu answered 2019-09-11T11:13:52Z
1 votes

为了删除Dotted Outline href链接,您可以在css文件中写入:

a {
   outline: 0;
}
BERGUIGA Mohamed Amine answered 2019-09-11T11:14:19Z
0 votes

我敢打赌,大多数用户不是使用键盘作为导航控件的用户类型。 那么,对于一个喜欢使用键盘导航的小组来说,惹恼大多数用户是否可以接受? 简短回答 - 取决于您的用户是谁。

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

如果您真的想知道自己的位置并且您是键盘用户,则可以在键入网站时查看状态栏。

Dwall answered 2019-09-11T11:15:02Z
0 votes

这对我来说非常适合

a img {border:none;}

Si- answered 2019-09-11T11:15:34Z
0 votes

任何具有链接的图像都会在图像周围显示边框,以帮助指示它是与旧版浏览器的链接。 将border =“0”添加到IMG HTML标记将阻止该图片在图像周围有边框。

但是,为每个图像添加border =“0”不仅耗费时间,还会增加文件大小和下载时间。 如果您不希望任何图像具有边框,请创建一个CSS规则或CSS文件,其中包含以下代码。

img {border-style:none;}

Sheryar Nizar answered 2019-09-11T11:16:20Z
-1 votes

我不确定这对这个人来说是否仍然是一个问题,但我知道这对许多人来说可能是一种痛苦。 当然,上述解决方案在某些情况下可以使用,但是如果您使用像WordPress这样的CMS,并且通过插件或主题生成轮廓,则很可能不会解决此问题,具体取决于 你是如何添加CSS的。

我建议使用单独的StyleSheet(例如,使用'Lazyest StyleSheet'插件),并在其中输入以下CSS以覆盖现有的插件(或主题)强制样式:

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

将'!important'添加到特定规则将使这成为优先生成,即使该规则可能在其他地方(无论是在插件,主题等)。

这有助于节省开发时间。 当然,你可以挖掘原始资源,但是当你正在处理许多项目,或者需要执行更新(你的更改可以被覆盖[不建议!]),或者添加新的插件或主题时,这是最好的 求助于节省时间。

希望这有助于......和平!

Roger Sanchez answered 2019-09-11T11:17:19Z
-9 votes

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


a:focus, a:active {outline:none}关于重置CSS的最佳实践,最佳解决方案是使用常见的:focus{outline:none}如果您还有最佳选择请分享

Wasim Shaikh answered 2019-09-11T11:17:54Z
translate from https://stackoverflow.com:/questions/814366/how-can-i-remove-the-outline-around-hyperlinks-images