css – Firefox或Safari不会重新加载样式表图像

前端之家收集整理的这篇文章主要介绍了css – Firefox或Safari不会重新加载样式表图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们发现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

编辑3:我已经做了一些阅读,看起来它无法修复,因为Firefox或大多数浏览器只会假设图像不会经常更改(过期标题和所有).

最佳答案
我只想在图像网址中添加一个查询字符串值.我通常只创建一个“版本号”并在每次图像更改时递增它:

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

猜你在找的CSS相关文章