我开始转型为大学俱乐部网站的网站管理员。他们刚刚推出了一个新的样板网站,该网站使用 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?)
作为参考,不起作用的图像名称的完整列表是:
我根本不熟悉modernizr,这似乎比jQuery更容易成为罪魁祸首。
什么会导致在Chrome(版本40)中使用基于社交媒体的名称禁用图像?
更新:Chrome或modernizr是否以编程方式隐藏无法加载的图片,以防止显示可能影响布局的红色X块?
问题出在Win 8.1 Update 1桌面上的Chrome 40上(虽然我的笔记本电脑与我的桌面有相同的操作系统/浏览器。)
我的桌面上的问题是两者实时服务器和完全脱离桌面的测试服务器。我的测试服务器正在使用XAMPP for Apache(不知道版本#offhand,我可以在我回家的时候得到它)。我无法访问生产PHP服务器,但我认为它也是Apache的类似版本。
问题出现在Chrome和DreamWeaver的设计/实时模式中。
我的桌面使用自己的互联网连接访问网站,但我也将VPN连接到大学网络。我的笔记本电脑目前工作正常,正在使用大学的WiFi网络之一。
答案 0 :(得分:3)
问题是Chrome,特别是Chrome扩展程序: AdBlock 负责阻止图片。
我的两台计算机上都安装了AdBlock(我的扩展程序都与我的Google帐户同步),因此我没有预料到扩展会成为问题所在。我的笔记本电脑订阅了相同的阻止列表,但没有这个问题。
然而,后见之明是20/20。事实上,与社交媒体相关的图标被封锁应该是关键。