IE7和IE8在CSS图片上随机挂起

Question

我们有一个使用ASP.NET 3.5开发的应用程序已经在生产环境运行了一年多。我们最近发布了一个版本，我们使用CSS进行样式和背景图片的应用。服务器是Windows 2003，使用IIS。

突然间，本周我们收到了一些用户报告说页面在加载时似乎卡住了。状态栏显示了页面主区域中使用的背景图片的名称（在CSS中指定）。在我们的办公室，有些人可以重现这个问题，而另一些人则无法重现。只有IE7/8受影响，IE6和Firefox似乎没有受影响。在受影响的机器上运行Fiddler并尝试查看请求的情况似乎使问题消失了（通过Fiddler运行时，问题消失了）。在挂起的加载上点击刷新通常会使页面正常加载。

我检查了背景图片，甚至用存档的副本替换了它。但是问题仍然存在。我们重新部署了来自生产源的应用程序，但问题仍然存在。我们重启了IIS并最终重启了整个服务器。事件日志、应用程序日志或IIS日志中都没有异常条目。最后，我完全删除了该图像，并重新设计页面以不使用背景图像。至少目前为止，这解决了问题。

然而，我们收到了其他图像“卡住”的报告。这些图片是PNG格式的，但我听说有时候GIF也会出现问题，但我没有截图来证实。

这个问题突然就出现了。最近没有发布或更新服务器上的任何内容。我们甚至检查了客户端的更新，看看最近的Windows更新是否导致了客户端的问题，但在过去的几周内没有更新任何内容。

如果您对这个问题有任何信息，请告诉我们。我们也非常感谢您对我们可以尝试的其他诊断方法的建议。

- BJ Safdie

---

您是否有您的网站/测试平台/沙盒的链接？ - Kasturi

遗憾的是，对于这种问答类型的问题，这个网站需要订阅才能获得登录ID。我们实际上没有一个开放的测试平台/沙盒。 - BJ Safdie

顺便说一句，至少在一台机器上已经确认了GIF挂起的问题。 - BJ Safdie

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

请澄清一下：当图像被渲染/下载时，页面停止加载了吗？已经加载的页面部分是否继续工作？浏览器挂起了吗？您能发布一些CSS/HTML片段以解决此问题吗？ - Mr. Shiny and New 安宇

Answer 1

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

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

- Allan

---

脑海中浮现出几个想法。首先，这些图像在IE6中正常工作，所以我不确定为什么它们会在更好支持Alpha通道的IE7 / 8中失败。其次，我认为我最终不得不删除的图像没有任何透明区域，只是带有阴影的左右边框和一个米白色的中心区域。但是，我愿意听取所有的想法，所以我会再次检查看看这是否可能是一个因素。 - BJ Safdie

我认为艾伦的观点是，也许 alpha 通道存在问题，而 IE6 没有遇到这个问题，因为它忽略了所有的 alpha。尽管机会渺茫，但还是值得一试。试着保存一个没有 alpha 的版本的 PNG，或者从像 Adobe Fireworks 这样的已知好的 PNG 导出程序中导出看看是否会有变化。 - JoshMock

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

Answer 2

这个bug显然有很多可能性，但我遇到了这个问题，我能够解决它，所以我想与社区分享我的解决方案。

我的代码大致是这样的：

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

标签的样式属性内部。 对于IE7，我将所有这些组合成一个单独的背景属性，如下所示：

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

IE7对尝试使用特定属性并不太友好。对我而言，在Chrome浏览器中既可以使用旧样式，也可以使用新样式，所以这绝对是一个IE7的问题。

- demongolem

Answer 3

这些图像是否托管在与主网站相同的服务器/网站上？可能是网络/DNS问题吗？

- Garry

---

这些图片托管在同一台服务器上，位于网站内的子目录中。单个服务器，没有 Web Farm。 - BJ Safdie

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

Answer 4

图片名称是否是驼峰式大小写或帕斯卡式大小写？我们曾经遇到过不全部小写的图片问题。另外，如果您转移到像S3这样的CDN，您会希望所有内容都是小写（以防万一）。

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

- smitchell360

---

这些图片都是小写的，带有破折号。我会尝试在今天晚些时候发布一些CSS片段。 - BJ Safdie

Answer 5

这个问题是在你的内部网络和外部来源都出现了吗？是否已经在内部网络之外进行了测试？（这听起来可能与DNS有关。）

- Jonathan Hickman

---

所有连接都是通过互联网进行的。服务器位于数据中心，没有直接连接到任何内部网络。巧合的是，我们将在本周末升级到一个新的设施中的新服务器，也许这会解决问题。 - BJ Safdie