Firefox 在图片链接周围显示蓝色框

Posted 2023-03-06

技术标签:

【中文标题】Firefox 在图片链接周围显示蓝色框【英文标题】：Firefox shows blue box around image link 【发布时间】：2013-10-13 12:19:07 【问题描述】：

我在我的网站上的所有这些图像周围都有一个锚标记。当你点击它时，它会滚动到 id "template"。

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

我已经尝试了书中的每一个技巧。

a imgborder:none; outline: none;

border=0 在图片标签本身中。

无论我做什么，一旦您点击它，图像周围总会出现蓝色边框。单击任何圆形图像（朝向底部）以供参考。请记住，要在 Firefox 中查看。

http://stevendennett.com/newsite/

谢谢！

【问题讨论】：

【参考方案1】：

图像周围的虚线边框是<a> 标签的轮廓。因此，当您删除 img 中的边框和轮廓时，它不会成为解决方案。

解决办法是

我们不需要编写太多代码。在这里试试：

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

【讨论】：

【参考方案2】：

我可以通过将锚颜色设置为透明来移除边框：

a.hi 
  color: transparent;

【讨论】：

【参考方案3】：

试试这个：

a.hi 
    outline: medium none;

【讨论】：

【参考方案4】：

该图像在 Chrome 和 Opera（15 岁以上）中运行良好。

所以发生的问题是浏览器的默认效果，这是 FF 中发生的情况。

还有 IE (10)：

但在 Chrome 中没问题，也就是说 CSS 中没有这种效果。

所以你必须尝试添加这个：

a > img 
   border: 0;

它将删除所有直接在a 超链接下的图像的边框。

看看你的代码：

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

我删除了它，并且没有边框！试试看:)

【讨论】：

【参考方案5】：

试试这个：

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

【讨论】：

以上是关于Firefox 在图片链接周围显示蓝色框的主要内容，如果未能解决你的问题，请参考以下文章