如何删除超链接图像周围的轮廓？答案

【问题标题】：How can I remove the outline around hyperlinks images?如何删除超链接图像周围的轮廓？
【发布时间】：2010-10-23 07:07:54
【问题描述】：

当我们使用 CSS 进行文本替换并给出否定的测试缩进时，即text-indent:-9999px。然后，当我们单击该链接时，虚线将如下面的示例图像所示。有什么办法解决这个问题？

【问题讨论】：

请不要删除它，它的存在是为了便于访问。
outlinenone.com
重复：stackoverflow.com/questions/1142819/… （但请参阅上面的辅助功能 cmets！）
我使用了错误的搜索词找到了这个。我建议任何阅读本文的人也注意这一点underlines in IE

标签： css

【解决方案1】：

用于删除锚标记的轮廓

a {outline : none;}

从图片链接中删除轮廓

a img {outline : none;}

去除图片链接的边框

img {border : 0;}

【讨论】：

谢谢你，发现。这一直困扰着我很长时间——不仅仅是 IE 中的超链接图片，还有没有超链接的常规图片。直到我找到你的答案（通过谷歌，而不是 Stack，奇怪的是），这很烦人。

【解决方案2】：

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

a {
outline: none;
}

希望对您有所帮助。

【讨论】：

【解决方案3】：

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

【讨论】：

这是唯一在 IE 中正常工作的情况，但它会导致页面在加载时闪烁。

【解决方案4】：

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

（将它们固定在适当的位置也有助于不喜欢使用鼠标的高级用户）

【讨论】：

我们不会删除 :focus 样式。只是添加样式大纲：没有。其他默认样式将在那里。
那么“其他默认样式”是什么？据我所知，只有一条虚线。
好的.. 也许我们可以为屏幕阅读器使用不同的样式。这可能是无障碍解决方案。
不仅屏幕阅读器使用大纲，有些人还喜欢用键盘浏览网站。

【解决方案5】：

Firefox 和 Internet Explorer (IE) 的边框效果是一样的，当你点击某个链接时它会变得可见。

此代码将仅修复 IE：

a:active { outline: none; }.

而且这个会修复 Firefox 和 IE：

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

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

【讨论】：

谢谢迈克，这个答案真的很好。但使用 -moz-outline-style: none;不是有效的 CSS。这个还是不错的选择

【解决方案6】：

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

img {border : 0;}

a img {outline : none;}

【讨论】：

【解决方案7】：

我希望这对你们中的某些人有用，它可用于从链接、图像和 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" />

【讨论】：

@Sparky 我相信我们应该通过讲述如何在包括 MSIE 在内的大多数使用的浏览器中执行此操作来回答这个问题，因为它是 2014 年广泛使用的浏览器以及有关 MS meta 的信息仅可用于 MSIE 的标签和 CSS 这只是我回答的一部分，为包括 MSIE 在内的大多数浏览器提供支持......问题与 W3C 有效的 HTML 或 CSS 无关......
@Sparky +1 因为这是真的，我们永远不应该相信 MS css/html/meta 标签，因为他们很少考虑 W3C 标准......我没说使用 Microsoft元标签及其 CSS 代码作为唯一支持 MS 代码的浏览器是 MSIE 和相关的 MS 浏览器。作为对“如何删除超链接图像周围的轮廓？”问题的要求答案
我只是发表了评论说明我的观察。
但是，我想知道您是否可以引用一个来源来说明您声称此元标记在 “某些情况” 中是必要的；以及这些情况可能是什么。
请阅读Microsoft website 获取一些但不是全部信息.. Stack Overflow 上有很多问题，其中一些问题可以列在右侧栏的此问题旁边。在某些情况下 MSIE/EDGE 无法显示页面内容，因为浏览器不支持它，在“某些情况下”X-UA-Compatible 元标记对 MSIE/EDGE 访问者很有用。还有更多信息，一个可以解决的问题是here我希望这对你有用

【解决方案8】：

这是适用于谷歌浏览器的最新版本

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

【讨论】：

确实如此。谢谢

【解决方案9】：

-moz-user-focus: ignore; 在基于 Gecko 的浏览器中（您可能需要 !important，具体取决于它的应用方式）

【讨论】：

【解决方案10】：

在 HTML 4.01 中这样使用

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

【讨论】：

【解决方案11】：

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

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

a:active { outline: none; }

我个人只会使用这个属性，好像:hover 属性具有相同的css 属性，它会阻止为使用键盘导航的人显示轮廓。

希望这能解决您的问题。

【讨论】：

【解决方案12】：

为了删除虚线的href链接，你可以在你的css文件中写：

a {
   outline: 0;
}

【讨论】：

【解决方案13】：

如果上述解决方案对任何人都不起作用。也试试这个

a {
 box-shadow: none;
}

【讨论】：

尝试了以上所有解决方案。这是一个 :)

【解决方案14】：

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

另外，我在 Firefox 和 Safari 中没有看到这种体验。所以这个论点似乎主要是针对IE的。这完全取决于您的用户群和他们的知识水平——他们如何使用该网站。

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

【讨论】：

【解决方案15】：

这对我很有效

a img {border:none;}

【讨论】：

【解决方案16】：

任何有链接的图片都会在图片周围有一个边框，以帮助表明它是与旧版浏览器的链接。将border="0" 添加到您的IMG HTML 标记将防止该图片在图像周围有边框。

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

img { 边框样式：无； }

【讨论】：

【解决方案17】：

我不确定这对这个人来说是否仍然是一个问题，但我知道这对许多人来说可能是一个普遍的痛苦。当然，上述解决方案可以在一些实例中使用，但如果您使用 WordPress 之类的 CMS，并且大纲是由插件或主题生成的，那么您很可能会没有解决了这个问题，具体取决于您添加 CSS 的方式。

我建议有一个单独的样式表（例如，使用“Lazyest StyleSheet”插件），并在其中输入以下 CSS 以覆盖现有的插件（或主题）强制样式：

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

将 '!important' 添加到特定规则将使其优先生成，即使该规则可能位于其他位置（无论是在插件、主题等中）。

这有助于节省开发时间。当然，您可以挖掘原始源代码，但是当您处理许多项目时，或者需要执行更新（您的更改可能会被覆盖 [不建议！]），或添加新插件时或主题，这是节省时间的最佳方法。

希望这会有所帮助...和平！

【讨论】：

【解决方案18】：

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

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

【讨论】：

不接受其他答案之一是不是有点粗鲁，谁的内容让你得出了结论？