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

当我们使用CSS使用Text Replacement并给出否定的test-indent时text-indent:-9999px。然后，当我们单击该链接时，虚线将如下图所示。有什么解决方案？

用于删除锚标签的轮廓

a {outline : none;}

从图像链接中删除轮廓

a img {outline : none;}

从图片链接中删除边框

img {border : 0;}

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

a {
outline: none;
}

希望能有所帮助。

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

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

（将它们保持在适当位置还可以帮助不喜欢使用鼠标的高级用户）

在Firefox和Internet Explorer（IE）中具有相同的边框效果，当您单击某些链接时，该效果变得可见。

此代码将仅修复IE：

a:active { outline: none; }.

而这个将修复Firefox和IE：

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

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

在样式表中包含此代码

img {border : 0;}

a img {outline : none;}

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

这是可在Google Chrome浏览器上运行的最新版本

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

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

对HTML 4.01像这样使用

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

您可以overflow:hidden在属性上加上文字缩进，然后该虚线就会消失，该虚线会超出页面范围。

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

a:active { outline: none; }

我个人只会使用此属性，因为该:hover属性具有相同的css属性，它将防止向使用键盘进行导航的人显示轮廓。

希望这能解决您的问题。

为了删除虚线轮廓href链接，您可以在css文件中编写：

a {
   outline: 0;
}

我敢打赌，大多数用户不是使用键盘作为导航控件的用户。那么是否可以让大多数用户厌烦一小群喜欢使用键盘导航的用户呢？简短答案-取决于您的用户是谁。

另外，我在Firefox和Safari中看不到这种体验。因此，这种说法似乎主要针对IE。这完全取决于您的用户群及其知识水平-他们如何使用该网站。

如果您确实想知道自己的位置并且是键盘用户，那么在通过该网站键入内容时，始终可以查看状态栏。

这完全适合我

a img {border:none;}

任何具有链接的图像都将在图像周围带有边框，以帮助表明它是与旧版浏览器的链接。在您的IMG HTML标签中添加border =“ 0”将防止该图片在图片周围带有边框。

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

img {边框样式：无；}

如果以上解决方案不适用于任何人。也尝试一下

a {
 box-shadow: none;
}

我不确定这是否仍然是这个人的问题，但我知道这通常会使许多人感到痛苦。诚然，上述解决方案将在工作的一些情况，但如果你是，例如，使用一个CMS像WordPress，并正在通过任何插件或者主题产生的轮廓，你很可能不会有这个问题解决了，这取决于您如何添加CSS。

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

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

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

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

希望这对您有帮助...和平！

是的，我们可以使用。CSS复位的a {outline:none}，也

a:focus, a:active {outline:none} 有关重置CSS的最佳做法，最佳解决方案是使用常用方法。:focus{outline:none}如果您仍然有最佳选择，请共享