除了 firefox 之外,没有其他浏览器正在加载 CSS 文件中的即时更改

No other browser except firefox is loading immediate changes in CSS file

我正在使用 PHP 制作网站。在完成它时,我只在 Firefox 上测试了它。今天,当我尝试在其他浏览器(Opera、Chrome 和 Internet Explorer)上进行测试时,我发现 CSS 中存在一些问题。当我更改我的 CSS 文件时,none 这些浏览器(Firefox 除外)显示在 CSS 文件中所做的更改。

<link rel="stylesheet" type="text/css" href="style.css" media="screen">

到目前为止,我谷歌了很长时间后尝试的是

有什么帮助吗?提前致谢....

这是大多数浏览器的预期行为。每当您尝试加载页面时,如果浏览器的缓存中已经存在任何资源,它们将从那里加载。

您有两个选择:

  1. 为您喜欢的浏览器禁用浏览器缓存(某些浏览器允许您为特定域禁用缓存)
  2. 通过将非重复参数附加到请求的资源文件名,使您的 HTML 始终刷新资源。我个人使用:?v=1482939287(其中 1482939287 是时间戳)。这将使浏览器始终刷新资源,因为它会请求浏览器缓存中不存在的版本。
    示例:<link rel="stylesheet" type="text/css" href="/css/style.css?v=1482939287">

更新:您可以通过打开 Dev Console 刷新网页缓存 (Ctrl+Shift +I ),right-click-点击刷新页面箭头(开发控制台打开时)并选择清空缓存和硬重新加载。即清空缓存。

您也可以禁用它,如上所示,方法是打开 Dev Console,转到 Network 选项卡并选中其下方的 "Disable Cache" 复选框。请注意,缓存 仅在您的开发者控制台打开时被禁用。

对此有多种解决方案。我将在下面列出我的一些选项。

文件的唯一标识符通过参数

在文件后面添加一个参数作为一种版本号可能会有所帮助。 在 php 中,您可以使用 time() 获取当前时间戳或使用 unique() 获取唯一字符串。


缓存设置服务器端

您还可以找到一些 .htaccess 设置,用于在服务器端缓存特定文件类型。出于性能原因,您也应该在生产环境中这样做。


浏览器开发工具

另一种方法是在开发时打开浏览器开发工具 (mostly F12)。大多数浏览器如 Chrome 和 FF 在您的浏览器开发工具打开时提供无缓存环境。作为 chrome 中的示例,您可以显式禁用缓存。


我的建议

或者甚至更好地使用 Task Runner 来完成此任务。要搜索的关键字是'cache bust'。例如,您可以 运行 gulp 进行连接、版本控制,并让它连接您想要的正确 css 文件。这是开发阶段特别建议的。

问候 吉奥馆