Firefox 或 Safari 不会重新加载样式表图像答案

【问题标题】：Style sheet images aren't reloaded by Firefox or SafariFirefox 或 Safari 不会重新加载样式表图像
【发布时间】：2010-09-17 01:26:45
【问题描述】：

我们发现 Firefox（至少 v3）和 Safari 不能正确缓存从 css 文件引用的图像。图像被缓存，但它们永远不会刷新，即使您在服务器上更改它们也是如此。一旦 Firefox 将图像放入缓存中，它就永远不会检查它是否已更改。

我们的 css 文件如下所示：

div#news {
  background: #FFFFFF url(images/newsitem_background.jpg) no-repeat;
  ...
}

问题在于，如果我们现在更改 newsitem_background.jpg 图片，所有 Firefox 用户仍将获得旧图片，除非他们明确刷新页面。另一方面，IE 会检测到图像已更改并自动重新加载。

这是一个已知问题吗？任何解决方法？谢谢！

编辑：解决方法是不要按 F5。我可以做这个。但我们的客户只会访问我们的网站，并获得旧的、过时的图形。他们怎么知道他们需要按 F5？

我已经安装了 Firebug 并确认了我已经怀疑的事情：Firefox 甚至不尝试检索从 css 文件引用的图像，以查明它们是否已被更改。当您按 F5 时，它会检查所有图像，并且 Web 服务器会很好地响应 304，除了那些已经更改的图像，它会响应 200 OK。

那么，有没有办法促使 Firefox自动更新从 css 文件引用的图像？肯定不止我一个人有这个问题？

EDIT2：我用 localhost 测试了这个，图像响应不包含任何缓存信息，它是：

Server  Microsoft-IIS/5.1
X-Powered-By    ASP.NET
Date    Tue, 14 Oct 2008 11:01:27 GMT
Content-Type    image/jpeg
Accept-Ranges   bytes
Last-Modified   Tue, 14 Oct 2008 11:00:43 GMT
Etag    "7ab3aa1aec2dc91:9f4"
Content-Length  61196

EDIT3：我已经阅读了更多内容，但似乎无法修复它，因为 Firefox 或大多数浏览器只会假设图像不会经常更改（标题和所有内容都过期）。

【问题讨论】：

标签： css firefox safari firefox-3

【解决方案1】：

尝试在单击重新加载时按住 SHIFT 键（或按 F5）。

否则，请使用 Firebug 等工具检查 HTTP 请求/响应标头并观察控制缓存的标头值。我从来没有注意到这个问题。也许您的服务器正在返回 304 响应（未修改）。

【讨论】：

【解决方案2】：

我知道这可能不是你想听到的，但更有可能的是 Firefox 遵循标准而 IE 正在做一些有点奇怪的事情（你只是碰巧依赖它；））。

缓存行为取决于随图像一起发送的缓存标头。如果您能够发布标题（或其中一张图片的 URL），那么我们将能够更具体地告诉您发生了什么。

【讨论】：

【解决方案3】：

验证您提供的图像上的 HTTP 标头以及 CSS 文件。

如果其中任何一个设置为缓存（或丢失），您会发现浏览器正在正确缓存文件。

【讨论】：

【解决方案4】：

为避免此类问题，我看到网站管理员将版本号添加到他们的文件中。所以他们加载site-look-124.css和newsitem_background-7.jpg.

不错的解决方案，恕我直言。

【讨论】：

【解决方案5】：

这并不能解决 Firefox 不检查图像是否过期的问题，但您可以采取以下措施确保您的客户看到正确的图像：

将css中的图片设置为返回图片的PHP或类似脚本：

div#news {
  background: #FFFFFF url(images/background.php?name=newsitem) no-repeat;
  ...
}

然后使用脚本返回图片"

<?php
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : false;
switch($name) {
    case 'newsitem':
        $filename = 'news_item_background.jpg';
    break;
    default:
        $filename = 'common_background.jpg';
    break;
}

header("Content-Type: image/jpeg");
header("Content-Transfer-Encoding: binary");
$fp = fopen($filename , "r");
if ($fp) fpassthru($fp);

我在我的家庭服务器上使用它为我的一些页面随机返回背景图像，而 Firefox 似乎没有缓存这些。如果您愿意，您还可以对图像做一些时髦的蠢事。

【讨论】：

【解决方案6】：

我只想在图像 url 中添加一个查询字符串值。我通常只是创建一个“版本号”并在每次图像更改时递增它：

div#news {
  background: url(images/newsitem_background.jpg?v=00001) no-repeat;
  ...
}

【讨论】：

我们在这里得出了相同的结论。我们需要在图片 URL 中添加一些字符串。

【解决方案7】：

另一个快速的解决方法（如果这主要发生在网页设计的中间）是在 Firefox 中查看实际的 css 页面，然后重新加载页面，然后当您返回网站时，浏览器将读取当前 css页面。

当然，这只是针对网页设计师的临时修复

【讨论】：

在这种情况下 ctrl+f5 成功，通常