是什么导致我的图像在 Chrome 中消失,但在 IE 中显示正确?
What's causing my images to disappear in Chrome, but show correct in IE?
我开始过渡到大学俱乐部网站的网站管理员角色。他们刚刚推出了一个使用 jquery-1.10.1.min 和 modernizr-2.6.2-respond-1.1.0.min.
在 IE 中,一切看起来都应该如此。所有 images/icons 都出现在它们应该出现的位置。
在 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">
标签。更改 class 没有帮助。
如果我将工作 <img>
更改为具有 img/facebook.png
的 src,则工作图像将停止工作。
如果我将 img/facebook.png
更改为 img/email.png
,这是一个有效的图标,那么图像就会出现。
如果我复制 facebook.png
并将其重命名为 fbicon.png
,它仍然不起作用。
如果我复制 facebook.png
并将其重命名为 email2.png
它 确实 有效。 (什么鬼?)
作为参考,无法使用的图像 名称 的完整列表是:
- facebook.png
- twitter.png
- fbicon.png
- social.png
我根本不熟悉 modernizr,这似乎比 jQuery 更有可能是罪魁祸首。
什么会导致在 Chrome(版本 40)中禁用带有基于社交媒体名称的图像?
更新: Chrome 或 modernizr 是否以编程方式隐藏无法加载的图像,以防止显示可能影响布局的红色 X 块?
问题出在 Win 8.1 Update 1 台式机上的 Chrome 40(尽管我的笔记本电脑与台式机具有相同的 OS/Browsers。)
我在 桌面 上遇到问题, 实时服务器和测试服务器完全脱离我的桌面运行。我的测试服务器使用的是 XAMPP for Apache(暂时不知道版本号,我在家的时候可以得到)。我无法访问生产 PHP 服务器,但我认为它也是类似版本的 Apache。
此问题同时出现在 Chrome 和 DreamWeaver 的 Design/Live 模式中。
我的桌面使用我自己的 Internet 连接访问该网站,但我也使用 VPN 连接到大学网络。我的笔记本电脑目前运行良好,正在使用大学的 WiFi 网络之一。
问题是 Chrome,特别是 Chrome 扩展:AdBlock 负责阻止图像。
我的两台机器上都安装了 AdBlock(我的扩展都与我的 Google 帐户同步),所以我没想到扩展会成为问题。我的笔记本电脑订阅了相同的黑名单,但没有这个问题。
然而,事后看来是 20/20。被屏蔽的是与社交媒体相关的图标这一事实应该是一个关键。
我开始过渡到大学俱乐部网站的网站管理员角色。他们刚刚推出了一个使用 jquery-1.10.1.min 和 modernizr-2.6.2-respond-1.1.0.min.
在 IE 中,一切看起来都应该如此。所有 images/icons 都出现在它们应该出现的位置。
在 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">
标签。更改 class 没有帮助。
如果我将工作 <img>
更改为具有 img/facebook.png
的 src,则工作图像将停止工作。
如果我将 img/facebook.png
更改为 img/email.png
,这是一个有效的图标,那么图像就会出现。
如果我复制 facebook.png
并将其重命名为 fbicon.png
,它仍然不起作用。
如果我复制 facebook.png
并将其重命名为 email2.png
它 确实 有效。 (什么鬼?)
作为参考,无法使用的图像 名称 的完整列表是:
- facebook.png
- twitter.png
- fbicon.png
- social.png
我根本不熟悉 modernizr,这似乎比 jQuery 更有可能是罪魁祸首。
什么会导致在 Chrome(版本 40)中禁用带有基于社交媒体名称的图像?
更新: Chrome 或 modernizr 是否以编程方式隐藏无法加载的图像,以防止显示可能影响布局的红色 X 块?
问题出在 Win 8.1 Update 1 台式机上的 Chrome 40(尽管我的笔记本电脑与台式机具有相同的 OS/Browsers。)
我在 桌面 上遇到问题, 实时服务器和测试服务器完全脱离我的桌面运行。我的测试服务器使用的是 XAMPP for Apache(暂时不知道版本号,我在家的时候可以得到)。我无法访问生产 PHP 服务器,但我认为它也是类似版本的 Apache。
此问题同时出现在 Chrome 和 DreamWeaver 的 Design/Live 模式中。
我的桌面使用我自己的 Internet 连接访问该网站,但我也使用 VPN 连接到大学网络。我的笔记本电脑目前运行良好,正在使用大学的 WiFi 网络之一。
问题是 Chrome,特别是 Chrome 扩展:AdBlock 负责阻止图像。
我的两台机器上都安装了 AdBlock(我的扩展都与我的 Google 帐户同步),所以我没想到扩展会成为问题。我的笔记本电脑订阅了相同的黑名单,但没有这个问题。
然而,事后看来是 20/20。被屏蔽的是与社交媒体相关的图标这一事实应该是一个关键。