css - 为什么我的 CSS 没有在 Web 浏览器中更新？

Question

在编写网站代码时，我会保存 HTML 和 CSS 文档，然后刷新浏览器以查看更改。但是，当我刷新 HTML 更改时，会看到 CSS 更改。相反，我要做的是关闭窗口并再次打开它以查看我的 CSS 更改。

有什么想法为什么我不能只刷新并查看 CSS 更改而不是关闭窗口并重新打开？

Answer 1

尝试“硬”刷新您的浏览器...

http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache

这个想法是绕过浏览器的缓存。不同的浏览器处理这个问题的方式不同，这篇 wiki 文章对每个主要浏览器都有一个很好的演练，说明如何做到这一点。

或者，您可以清除浏览器的缓存，wiki 文章也对此进行了介绍。

Answer 2

我认为是缓存问题。

如何定位问题

如果您使用的是 Chrome 或 Firefox 或 Safari，只需右键单击页面并选择inspect element，然后选择network选项卡。

现在像往常一样刷新你的页面，你会看到所有的 http 请求是这样的：

如果css文件状态为304，表示浏览器向服务器询问css文件，服务器说：“不，你不用问我，css文件我之前给你了，没变过。”

如果 css 文件状态为 200，但大小为from cache，则表示浏览器甚至不向服务器请求文件，浏览器认为他有最新的文件。

我认为您处于第二种情况（来自缓存的 200）。

如何解决这个问题：

1. 您可以随时清除浏览器缓存以查看更改。或者您可以禁用浏览器缓存以进行调试。

   但是你不能总是告诉你的访问者清除缓存，所以第二种方法：

2. 如果您使用 PHP 或其他任何服务器语言，请将查询字符串附加到 css 文件名：

   <link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />

   99％的时间，这会奏效。

3. 如果它是静态 html 页面，您可以手动更改 css 查询字符串（如果您愿意，甚至可以更改 css 文件名）。

Answer 3

根据浏览器的不同，这可能是缓存问题。

您的浏览器中可能存在阻止更新缓存的设置。

您是否尝试将浏览器重置为默认值？

我问的原因是 Firefox 和 Chrome 的处理方式不同。

如果您在 Firefox 中清除缓存+cookies，它可能在您关闭所有浏览器窗口后才会生效。

Chrome 将使用每个单独的选项卡刷新缓存。

我建议也许重新安装您的浏览器，因为这绝对是一个本地问题，但与 css 本身无关。