Firefox显示图像链接周围的蓝色框。

Question

我网站上所有这些图像周围都有一个锚点标签。当您单击它时，它会滚动到id为“template”的位置。

<a class="hi" href="#template"><img src="images/01.png" /></a>

我已经尝试了书中的所有技巧。

a img{border:none; outline: none;}

在图像标签中加入border=0。无论我做什么，单击图像后始终会出现蓝色边框。可以点击底部的任何圆形图像以供参考。请记住，在Firefox中查看。http://stevendennett.com/newsite/谢谢！

- user2415116

Answer 1

图片周围的虚线边框是链接标记<a>的轮廓。因此，当您在img中删除边框和轮廓时，这并不是解决方案。

解决方法如下：

我们不需要添加太多代码。请尝试以下方法：

a { /* Remove all the outline border all in our document. */
   outline: none;
}

- KoemsieLy

Answer 2

我通过将锚点颜色设置为透明，成功去掉了边框：

a.hi {
  color: transparent;
}

- jasonyork

Answer 3

试试这个：

a.hi {
    outline: none;
    color: transparent;
    text-decoration: none;
}

- emerson.marini

Answer 4

试试这个：

a.hi {
    outline: medium none;
}

- Sophea Phy

Answer 5

这张图片在Chrome和Opera（15+）中运行良好。

因此，发生的问题是浏览器的默认效果，在FF中会发生什么。

还有IE (10)：

但在 Chrome 中这没问题，这意味着 CSS 中没有这样的效果。

因此你必须尝试并添加这个：

a > img {
   border: 0;
}

它将从所有直接位于超链接下方的图像中移除边框。

看一下你的代码：

在你的CSS文件中，第35行（如果我没记错）有outline: medium none和border: medium none;

我把它们删掉了，然后就没有边框了！试试吧 :)

- Afzaal Ahmad Zeeshan