为什么图片锚链接不能在 Firefox 中加载？答案

【问题标题】：Why don't image anchor links load in Firefox?为什么图片锚链接不能在 Firefox 中加载？
【发布时间】：2016-09-28 04:16:11
【问题描述】：

我为我的品牌beppo 设计了一个静态网站 (www.beppo.in) 并将其托管在 Git 上。

在此处查看 Firefox 和 Chrome 中的行为比较：

该网页在 Chrome 中可以正常打开，但在 Firefox 中图像锚链接被隐藏，因为 Firefox 为 class 属性添加了一些垃圾值。即使这样，根据我对元素的多个类的理解，对象应该正确呈现。但是由于某种原因，这些元素被隐藏了。

该网页可能看起来有点棘手（我想通过设计给人留下深刻印象）并且我刚刚完成了网站的 5%，所以请承担我的业余编码技能，因为我没有遵循任何编码约定，因为我我正在试验这个设计。

查看下面div_snds内的img元素的检查结果；注意class="changesrc kybykzzeojjrekictcig":

<div id="div_snds">
<span class="label">Find us on:</span>
<a href="http://www.facebook.com/beppo.in" target="_blank" class="tooltip"><span class="small">facebook.com/beppo.in</span><img class="changesrc kybykzzeojjrekictcig" id="imgFb" src="images/fb.png" draggable="false" onmousedown="return false;" alt="FB" onmouseout="this.src='images/fb.png';" onmouseover="this.src='images/fb_link.png';"></a>
<a href="http://www.twitter.com/BeppoIndia" target="_blank" class="tooltip"><span class="small">twitter.com/BeppoIndia</span><img class="changesrc kybykzzeojjrekictcig" id="imgTwt" src="images/twitter.png" draggable="false" onmousedown="return false;" alt="TWT" onmouseout="this.src='images/twitter.png';" onmouseover="this.src='images/twitter_link.png';"></a>
<a href="https://www.google.com/+BeppoIndia" target="_blank" class="tooltip"><span class="small">google.com/+BeppoIndia</span><img class="changesrc kybykzzeojjrekictcig" id="imgGplus" src="images/gplus.png" alt="GPLUS" draggable="false" onmousedown="return false;" onmouseout="this.src='images/gplus.png';" onmouseover="this.src='images/gplus_link.png';"></a>
<a href="http://www.instagram.com/beppo.in" target="_blank" class="tooltip"><span class="small">instagram.com/beppo.in</span><img class="changesrc kybykzzeojjrekictcig" id="imgIns" src="images/instagram.png" draggable="false" onmousedown="return false;" alt="INSTA" onmouseout="this.src='images/instagram.png';" onmouseover="this.src='images/instagram_link.png';"></a>
<a href="http://www.beppoblog.wordpress.com" target="_blank" class="tooltip"><span class="small">beppoblog.wordpress.com</span><img class="changesrc" id="imgWord" src="images/wordpress.png" alt="WORDP" draggable="false" onmousedown="return false;" onmouseout="this.src='images/wordpress.png';" onmouseover="this.src='images/wordpress_link.png';"></a>
</div>

我不知道是因为 Git 作为主机还是我的业余编码技能或任何其他意外的外部问题？

如果有人遇到类似问题并成功解决，请帮助我。

【问题讨论】：

我在 Firefox 上，我可以看到您在 Chrome 中看到的确切内容，也许将您的 Firefox 更新到最新版本或清除本地存储以便它可能重新加载样式等？
可能是，但我在我朋友的一台电脑上也看到了同样的问题。我不能要求所有网站用户更新他们的 Firefox 对吗？仅在Firefox中发生这种情况是否有原因？其他人有没有想过？
感谢您的努力@AngelosChalaris :-)

标签： javascript html css git firefox

【解决方案1】：

神秘类kybykzzeojjrekictcig 正在被广告拦截扩展程序添加。它的名字是随机生成的。

您可以通过在 Firefox 中重现该问题来对此进行测试，然后禁用您正在运行的任何广告拦截扩展程序并尝试再次重现该问题。

您还可以使用 Firefox（或 Chrome，如果您在那里看到同样的问题）中的开发工具，并找到由于 kybykzzeojjrekictcig 或类似随机命名的神秘类而应用于元素的样式。您应该会看到类似以下内容：

display: none !important;
visibility: hidden !important;
opacity: 0 !important;
background-position: 1px 1px;

【讨论】：