是什么原因导致我的图片在Chrome中消失,但在IE中显示正确?

时间:2015-03-04 05:29:43

标签: jquery google-chrome modernizr

我开始转型为大学俱乐部网站的网站管理员。他们刚刚推出了一个新的样板网站,该网站使用 jquery-1.10.1.min modernizr-2.6.2-respond-1.1.0.min

在IE中,一切都看起来应该如何。所有图像/图标都显示在他们应该的位置。

在Chrome中,页脚的一个部分中的两个图标消失,索引中的另一个图像消失。

Chrome开发者工具向我展示了这些元素应用了这些样式:

element.style {
 display: none !important;
 visibility: hidden !important;
 opacity: 0 !important;
 background-position: 1px 1px;
}

element.style意味着JS正在应用该样式。

没有用于生成这些图像的PHP脚本。 除了jquery和modernizr之外,没有使用JS脚本。

他们只是简单的<img src="img/facebook.png" class="class">标签。改变班级并没有帮助。

如果我将工作<img>更改为img/facebook.png的src,则工作图像将停止工作。

如果我将img/facebook.png更改为img/email.png,这是一个工作图标,则会显示图像。

如果我复制facebook.png并将其重命名为fbicon.png,它仍然无效。 如果我复制facebook.png并将其重命名为email2.png,那么工作。 (WTF?)

作为参考,不起作用的图像名称的完整列表是:

  • facebook.png
  • twitter.png
  • fbicon.png
  • social.png

我根本不熟悉modernizr,这似乎比jQuery更容易成为罪魁祸首。

什么会导致在Chrome(版本40)中使用基于社交媒体的名称禁用图像?

更新:Chrome或modernizr是否以编程方式隐藏无法加载的图片,以防止显示可能影响布局的红色X块?

问题出在Win 8.1 Update 1桌面上的Chrome 40上(虽然我的笔记本电脑与我的桌面有相同的操作系统/浏览器。)

我的桌面上的问题是两者实时服务器和完全脱离桌面的测试服务器。我的测试服务器正在使用XAMPP for Apache(不知道版本#offhand,我可以在我回家的时候得到它)。我无法访问生产PHP服务器,但我认为它也是Apache的类似版本。

问题出现在Chrome和DreamWeaver的设计/实时模式中。

我的桌面使用自己的互联网连接访问网站,但我也将VPN连接到大学网络。我的笔记本电脑目前工作正常,正在使用大学的WiFi网络之一。

1 个答案:

答案 0 :(得分:3)

问题是Chrome,特别是Chrome扩展程序: AdBlock 负责阻止图片。

我的两台计算机上都安装了AdBlock(我的扩展程序都与我的Google帐户同步),因此我没有预料到扩展会成为问题所在。我的笔记本电脑订阅了相同的阻止列表,但没有这个问题。

然而,后见之明是20/20。事实上,与社交媒体相关的图标被封锁应该是关键。