如何在Firefox中去掉作为链接使用的图像周围的边框？

Question

这是一个有点奇怪的问题，我觉得更多的是因为我不确定它叫什么。但是我有一个包含在链接中的图像。

例如：

...<li>
  <a href="#link">
    <img ...>
  </a>
 </li> .....

现在我将css边框规则全部设置为0，所以没有蓝色边框。但是在Firefox中，只有当我点击图像时才会出现粉色的小虚线边框？在其他浏览器中，任何时候都没有边框。我不确定它是否来自浏览器本身还是我遗漏了什么。在我的css中，我已经将a、:hover、:visited的边框设置为0，我甚至将text-decoration设置为none，以为这可能有所帮助。但是无济于事。我尝试在线搜索帮助，但所有我得到的信息都是关于删除由于将图像放置在链接中而引起的边框。因此，任何帮助或指向正确方向的指导都将是极好的。！ 编辑//我添加了一张图片以更好地解释我在说什么。

- Tad

---

你试过我刚才发布的内容了吗？我保证这就是大纲 :) - Marko

是的，我试过了，这就是草稿。谢谢Marko！ - Tad

Answer 1

默认情况下，链接 (<a>) 在被“激活”或“聚焦”时会被加上虚线边框。在 Firefox 3 中，该颜色取决于文字的颜色。

要去除这个边框，只需使用以下代码：

a {
    outline: none;
}

或者你可以像我一样将其从所有元素中移除（我使用自己的焦点/激活规则），并执行：

* {
    outline: none;
}

这将从所有元素中删除它。

- Marko

---

True。但这将影响可用性和可访问性。使用键盘导航将更加困难。当您通过链接进行制表时，将显示outline。相反，考虑使用outline-color属性给它一个不那么令人不安的颜色。 - BalusC

我同意，这就是为什么我说要使用我的焦点/活动规则 :) 在IE中，默认情况下未启用轮廓，因此当通过字段进行制表时，我会在:active状态下更改背景颜色或边框颜色。 - Marko

哦，当我第一次看到你的答案时，那部分答案还没有出现 :) - BalusC

你可能想为 a:focus 使用不同的背景图片和略微不同的字体颜色。 - BalusC

哦，还有@BalusC - 感谢您协助回答，如果可以的话我会给您一半的积分 :) - Marko

Answer 2

#link img a
{
border:0;
outline:none;
}

- user2645981

Answer 3

安装Firebug并查看发生了什么。我认为发生的事情可能是img标签可能有一个默认边框。

要删除它，您可以尝试将a和img标签放在具有id的div中，并使用以下CSS：

您的HTML：

<div id="test">
  <a...>
  <img .../>
  </a>
</div>

并使用以下CSS：

#test img { 
  border-style: none; 
}

- Sharvil

---

已经解决了，但还是谢谢。边框已经设置为0了，问题是由CSS属性outline引起的。 - Tad