javascript - 为什么在 Firefox 中不加载图像 anchor 链接?

标签 javascript html css git firefox

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

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

Screenshot comparison

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

该网页可能看起来有点棘手(我想通过设计给人留下深刻印象)并且我刚刚完成了网站的 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 作为宿主还是我的业余编码技能或任何其他意外的外部问题?

如果有人遇到过类似的问题并成功克服了,请帮助我。

最佳答案

神秘的类 kybykzzeojjrekictcig 是由广告拦截扩展添加的。它的名字是随机生成的。

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

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

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

关于javascript - 为什么在 Firefox 中不加载图像 anchor 链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37909621/

相关文章:

java - 我们如何知道用户提交的日期格式?

javascript - 如何禁用按钮一段时间并再次重复(javaScript)

html - 检查浏览器过去是否允许地理定位服务?

css - 使用骨架网格更改按钮中的字体大小

php - 水平样式化​​ Wordpress 小部件

javascript - 在 Google 折线图中的线注释之上添加图像

javascript - 使用each()求和值

javascript - 第一次尝试时 jQuery 未加载

html - 在浏览器中工作的媒体查询调整大小而不是在移动设备中

javascript - Three.js 是否可以在同一场景上制作迷你相机/迷你 map 或第二个相机而不进行视口(viewport)裁剪