代码之家  ›  专栏  ›  技术社区  ›  Prakash M.

为什么Firefox中不加载图像锚链接?

  •  1
  • Prakash M.  · 技术社区  · 8 年前

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

    在这里查看Firefox和Chrome的行为比较:

    Screenshot comparison

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

    网页看起来可能有点棘手(我想用这个设计给人留下印象),我刚刚完成了网站的5%,所以请接受我的业余编码技能,因为自从我尝试设计以来,我没有遵循任何编码惯例。

    查看检查结果 img 内部元件 div_snds 在下面请注意 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作为主持人,还是因为我的业余编码技能,或是其他任何意外的外部问题?

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

    1 回复  |  直到 8 年前
        1
  •  1
  •   Robin James Kerrison    8 年前

    神秘的班级 kybykzzeojjrekictcig 正在由广告阻止扩展插件添加。它的名称是随机生成的。

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

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

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