Hostinger网站CSS文件更新不生效问题求助

1. 用自动版本号替代手动固定版本号 #

你之前用?v=1.0没效果，大概率是每次更新后没修改版本号的值。手动改版本号容易遗漏，建议用文件修改时间自动生成版本号，只要CSS文件内容变更，版本号就自动更新，浏览器会强制拉取新文件。

如果你的网站基于PHP开发，把CSS链接改成：

<link href="nav.css?v=<?php echo filemtime('nav.css'); ?>" rel="stylesheet" type="text/css" />

filemtime()会返回文件最后修改的时间戳，每次修改CSS后这个值都会变化，浏览器会判定为新文件，自动跳过本地缓存。

2. 清除Hostinger服务器端缓存 #

Hostinger默认开启了LiteSpeed缓存或自有网站缓存，即便前端改了版本号，服务器可能仍在返回旧的缓存文件。操作步骤：

• 登录Hostinger的hPanel
• 找到「缓存」或「LiteSpeed缓存」选项
• 点击「清除网站缓存」，确保服务器端的旧CSS缓存被清空

3. 配置.htaccess缓存规则（优化长期缓存策略） #

在网站根目录的.htaccess文件中添加以下规则，既让浏览器长期缓存未修改的CSS文件，又能在版本号更新时强制刷新：

<FilesMatch "\.(css)$">
    # 设置1年长期缓存，配合版本号使用
    Header set Cache-Control "public, max-age=31536000, must-revalidate"
    # 启用ETag，帮助浏览器验证文件是否更新
    FileETag MTime Size
</FilesMatch>

这个规则会告诉浏览器：版本号不变时用本地缓存；版本号变更时，直接从服务器拉取新文件。

4. 针对Chrome用户的额外排查 #

Chrome对缓存的处理更严格，可能存在以下情况：

• 检查Service Worker：如果网站用了PWA或注册了Service Worker，它可能会独立缓存CSS文件。需要更新Service Worker脚本，或调整其缓存策略，排除CSS文件或设置过期逻辑。
• 用开发者工具验证：按F12打开「网络」面板，刷新页面后查看CSS文件的状态码：
  • 状态码200：说明拉取了新文件
  • 状态码304：说明仍在使用缓存，此时检查版本号是否更新，或服务器端缓存是否清除

5. 放弃无效的缓存禁用手段 #

你之前添加的CONTENT="NO CACHE"效果有限，不同浏览器对no-cache的实现不一致，还会降低网站加载性能，不建议使用。版本号+服务器端缓存配置才是可靠的解决方案。

内容的提问来源于stack exchange，提问作者Ziad Ahmed