为什么我的 CSS 在 Web 浏览器中没有更新？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18543776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my CSS not updating in web browser?
提问by Michael Sórm
When coding my website, I save HTML and CSS docs then refresh my browser to see the changes. However when I refresh the HTML changes are seen but the CSS changes aren't. Instead what I would have to do is close the window and reopen it again to see my CSS changes.
编写网站代码时，我保存 HTML 和 CSS 文档，然后刷新浏览器以查看更改。但是，当我刷新时，可以看到 HTML 更改，但没有看到 CSS 更改。相反，我必须做的是关闭窗口并再次重新打开它以查看我的 CSS 更改。
Any ideas why I cant just refresh and see the CSS changes instead of closing the window and reopening?
任何想法为什么我不能只是刷新并查看 CSS 更改而不是关闭窗口并重新打开？
回答by Hristo
Try a "hard" refresh of your browser...
尝试“硬”刷新浏览器...
http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache
http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache
The idea is to bypass your browser's cache. Different browsers handle this differently, and this wiki article has a nice walk-through for each major browser on how to do this.
这个想法是绕过浏览器的缓存。不同的浏览器对此有不同的处理方式，这篇 wiki 文章为每个主要浏览器提供了有关如何执行此操作的很好的演练。
Alternatively, you could clear your browser's cache, which is also covered by the wiki article.
或者，您可以清除浏览器的缓存，这也包含在 wiki 文章中。
回答by Yuguo
I think it's the cache problem.
我认为是缓存问题。
How to locate the problem
如何定位问题
If you are using Chrome or Firefox or Safari, just right click on the page and choose inspect element, and choose networktab.
如果您使用的是 Chrome 或 Firefox 或 Safari，只需右键单击页面并选择inspect element，然后选择network选项卡。
Now refresh your page as usual, and you'll see all http request like this:
现在像往常一样刷新你的页面，你会看到所有的 http 请求是这样的：
If the css file status is 304, means browser ask the server the css file, and server says: "no, you don't need to ask me, I gave you the css file before, it has not changed."
如果css文件状态为304，表示浏览器向服务器询问css文件，服务器说：“不，你不用问我，我以前给过你css文件，它没有改变。”
If the css file status is 200, but the size is from cache, it means the browser do not even ask the server for the file, the browser think he has the newest file.
如果css文件状态为200，但大小为from cache，这意味着浏览器甚至不向服务器询问文件，浏览器认为他拥有最新的文件。
I think you are in the second condition(200 from cache).
我认为您处于第二种情况（来自缓存的 200）。
How to solve this:
如何解决这个问题：
you can always clear the browser cache to see the changes. Or you can disable browser cache for debugging purpose.
But you can't always tell your visitors to clear the cache, so the second method:
if you are using PHP or whatever as server language, append a query string to the css file name:
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />99% of the time, this will work.
if it's a static html page, you can change the css query string manually(or even the css file name, if you like).
您可以随时清除浏览器缓存以查看更改。或者您可以禁用浏览器缓存以进行调试。
但是你不能总是告诉你的访问者清除缓存，所以第二种方法：
如果您使用 PHP 或其他语言作为服务器语言，请将查询字符串附加到 css 文件名：
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />99% 的情况下，这会奏效。
如果它是一个静态 html 页面，您可以手动更改 css 查询字符串（甚至可以更改 css 文件名，如果您愿意）。
回答by Dennis Carney
Depending on the browser, it might be a caching problem.
根据浏览器的不同，这可能是缓存问题。
There may be a setting in your browser that is preventing the Cache from updating.
您的浏览器中可能存在阻止缓存更新的设置。
Have you tried to reset your browser to defaults?
您是否尝试将浏览器重置为默认设置？
The reason I ask, is Firefox and Chrome handle this way differently.
我问的原因是 Firefox 和 Chrome 以不同的方式处理这种方式。
If you clear the cache+cookies in Firefox, it might not take effect until you close ALL Browser windows.
如果您在 Firefox 中清除缓存 + cookie，则在您关闭所有浏览器窗口之前，它可能不会生效。
Chrome will refresh the cache with each individual tab.
Chrome 将使用每个单独的选项卡刷新缓存。
I would suggest maybe re-installing your browser because this definitely appears to be a local issue, but not affiliated with the css itself.
我建议您重新安装浏览器，因为这肯定是本地问题，但与 css 本身无关。
