IE7 和 8 在 CSS 图像上随机挂起

Posted 2023-03-06

【中文标题】IE7 和 8 在 CSS 图像上随机挂起

【英文标题】：IE7 and 8 Hangs Randomly on CSS Images

【发布时间】：2011-02-14 15:07:33

【问题描述】：

我们有一个 ASP.NET 3.5 应用程序已经投入生产一年多了。我们的上一个版本是几个月前。我们使用 CSS 来为 div 等设置背景图像的样式和应用。服务器是带有 IIS 的 Windows 2003。

本周，我们突然收到一些用户的报告，称该页面在加载时似乎挂起。状态栏显示页面主区域中使用的背景图像的名称（在 CSS 中分配）。在我们的办公室，我们中的一些人可以重现问题，而其他人则不能。 IE6 和 Firefox 似乎没有受到影响，只有 IE7/8。在受影响的机器上运行 Fiddler 并尝试查看请求发生了什么似乎使问题消失（通过 Fiddler 运行时，它在没有时返回）。在挂起的负载上点击刷新通常会使页面加载正常。

我检查了背景图片，甚至将其替换为存档副本。没有喜悦。我们从生产源重新部署了该应用程序。没有喜悦。我们重新启动了 IIS 并最终重新启动了整个服务器。事件日志、应用程序日志或 IIS 日志中没有异常条目。最后，我完全删除了图像并重新设置了页面的样式以不使用背景图像。这至少解决了现在的问题。

但是，我们有其他图像“挂起”的报告。图片是 PNG，但我听说过一些传言，有时 GIF 会挂起，但我没有截图可以确认。

这只是“突然”发生的事情。最近没有应用到服务器的版本或更新。我们甚至检查了客户端上的更新，看看最近的 Windows 更新是否可能导致客户端出现这种情况，但在过去几周内没有任何更新。

如果您有任何有关此问题的信息，我很乐意听取您的意见。我也非常感谢我们可以尝试的其他诊断的任何建议。

【问题讨论】：

你的网站/测试平台/沙盒有链接吗？

很遗憾这种问答，这个网站是一个订阅网站，你需要一个登录ID。我们真的没有开放的测试平台/沙箱。

顺便说一句，至少在一台机器上确认了 GIF 挂起。

可能是网络或操作系统问题。测试时使用 Ctrl+F5 强制 IE 重新加载（不刷新）页面。客户端或服务器或网络上安装了任何病毒软件？服务器上有备份软件或克隆软件吗？服务器是“虚拟机”吗？这是否发生在同一子网上？这发生在内部还是外部？最近有防火墙更改吗？你使用代理服务器？我怀疑 IE/CSS/ASP.NET 问题；否则，答案将在网上。可能是坏图像。重新创建为 jpeg，测试，然后从 jpeg 重新创建为 png，测试。用什么软件制作png？尝试不同的软件。

澄清一下：在渲染/下载图像时页面停止加载？已经加载的页面部分是否继续工作？浏览器挂了？你能发布一些你为了解决它而改变的 CSS/html sn-ps 吗？

【参考方案1】：

我可以建议您更仔细地查看您的 PNG 版本/内容吗？

PNG 文件支持 alpha 通道，它提供了一种透明形式。 IE 6 不支持 Alpha 通道，因此可能会以不同方式处理您的图像。 IE 7 & 8 确实支持 Alpha 通道。

【讨论】：

我想到了几件事。首先，图像在 IE6 中运行良好，所以我不确定为什么它们会在 IE7/8 中更好地支持 Alpha 通道而失败。其次，我认为我最终不得不删除的图像没有任何透明区域，它只是一个带有灰白色中心区域的阴影左右边框。但是，我对所有想法持开放态度，因此我会仔细检查这是否是一个因素。

我认为 Allan 的观点是 IE6 没有遇到的 alpha 通道可能有问题，因为它忽略了所有 alpha。这是一个很长的镜头，但值得一试。尝试保存非 alpha 版本的 PNG 或从已知良好的 PNG 导出器（如 Adob​​e Fireworks）导出，看看是否有任何变化。

我这周一直在为服务器迁移做准备，所以这个问题被搁置了。这周我将使用 Photoshop，因此我们将能够检查新服务器上的性能并尝试在 Photoshop 中重新创建图像。

【参考方案2】：

图片是否托管在与主站点相同的服务器/网站上？会不会是网络/DNS 问题？

【讨论】：

图像托管在同一台服务器上，位于网站的子目录中。单服务器，无网络场。

我正在标记 Garry 的答案，因为他是第一个建议网络/DNS 的人。我不确定实际的问题是什么，但是当我们搬到新的数据中心和硬件时，问题就消失了。

【参考方案3】：

图像名称是camelCased还是PascalCased？我们遇到了并非全部小写的图像的问题。此外，如果您迁移到 S3 等 CDN，您会希望所有内容都小写（以防万一）。

请发布 CSS 和文件的混淆路径。

【讨论】：

图片都是小写的，带有破折号。今天晚些时候我会尝试发布一些css sn-ps。

【参考方案4】：

您的 Intranet 和外部资源都发生这种情况吗？这是否在内部网络之外进行了测试？ （这听起来可能与DNS有关。）

【讨论】：

连接都是互联网。服务器位于数据中心，未直接连接到任何内部网络。巧合的是，本周末我们将在新设施中升级到新服务器，所以也许这会解决问题。

【参考方案5】：

这个错误显然有很多可能性，但我遇到了这个问题，我能够解决这个问题，所以我想我会与社区分享我的修复。

我有类似的东西

background-image: url("/myapp/images/expand_title_off.gif"); 
background-repeat: no-repeat; 
background-position: center center; 

span 元素的样式属性内部。

对于 IE7，我将所有这些组合成一个单独的背景属性，例如

background:url("/myapp/images/expand_title_off.gif") no-repeat center center;

IE7 在尝试使用特定属性时看起来不太友好。对我来说，新旧样式都适用于 chrome，所以绝对是 IE7 问题。