我的html文件css样式表修改后其他浏览器可以显示，但是谷歌的显示还是以前的样式是怎么回事

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我的html文件css样式表修改后其他浏览器可以显示，但是谷歌的显示还是以前的样式是怎么回事相关的知识，希望对你有一定的参考价值。

我的html文件css样式表修改后其他浏览器可以显示修改后的样式，但是谷歌的显示还是以前的样式是怎么回事，我看了html文件的编码和css文件的编码都是一样的，就是显示不出来修改后的样式，比如我改了宽度原来是400，我改成500，其他浏览器可以显示成500，但是谷歌显示的还是以前写的400，是什么问题呢，浏览器自己的缓存？
以前都没什么问题，就是最近才出现这种情况，

参考技术A

1. 开发阶段的话，切换到chrome的开发者模式下，在开发者模式下的网络tab下，有个关闭缓存的复选框，你可以把它钩上看看效果。

2.上线部署的话，如果你的html是引入一个css文件，当css内容发生变动的时候，你的html应该修改下该css的文件名或者版本号。（建议使用gulp等自动打包工具）

<link rel="stylesheet" type="text/css" href="../css/index.css?v=111"

另外，对于入口的html文件，建议添加去缓存的meta：如

  <meta http-equiv="cache-control" content="max-age=0" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  <meta http-equiv="pragma" content="no-cache" />

修改meta值的办法不是所有浏览器都支持的很好，根源可以在服务器（如Tomcat，ngix）上配置去缓存的策略

本回答被提问者采纳 参考技术B ctrl+shift+n 打开隐身模式，在隐身模式中调试程序就可以了 参考技术C 有可能是缓存，吧历史记录清除了式一下吧

我可以强制刷新我的样式表文件吗？

【中文标题】我可以强制刷新我的样式表文件吗？【英文标题】：Can I force a refresh of my stylesheet file? 【发布时间】：2010-11-17 09:58:54 【问题描述】：

我刚刚花了半天时间安静地发疯。

我正在对 Site.css 文件中的类进行更改，但它们没有反映在我机器上正在开发的站点中。因为我正在通过 jQuery 学习并使用 addClass 和 removeClass，并且我正在为这些调用动态创建参数，所以我确信问题出在我的实现中。

原来 CSS 文件已缓存在浏览器中，我所要做的就是刷新它...

有没有办法强制刷新（我猜最好只在调试期间）？

【问题讨论】：

【参考方案1】： 
<link href="~/css/Style.css?t=@DateTime.Now" rel="stylesheet" />

我在 C# Date Time 中使用了这个简单的技巧。

【讨论】：

【参考方案2】：

为了进一步使用Ian Kemp's 的答案，它利用了相关样式表的LastWriteTime，我编写了一个MVC 助手来输出带有内置缓存清除参数的&lt;link&gt; 标记。

守则

public static class CssLinkHelper

    public static IHtmlString StyleSheet(this HtmlHelper helper, string stylesheetname)
    
        // define the virtual path to the css file (see note below)
        var virtualpath = "~/" + stylesheetname;
        // get the real path to the css file
        var realpath = HostingEnvironment.MapPath(virtualpath);
        // get the file info of the css file
        var fileinfo = new FileInfo(realpath);

        // create a full (virtual) path to the css file including a cache busting parameter (e.g. /main.css?12345678)
        var outputpath = VirtualPathUtility.ToAbsolute(virtualpath) + "?" + fileinfo.LastWriteTime.ToFileTime();
        // define the link tag for the style sheet
        var tagdefinition = string.Format("<link rel=\"stylesheet\" type=\"text/css\" href=\"0\" />", outputpath);

        // return html string of the tag
        return new HtmlString(tagdefinition);

用法

@Html.StyleSheet("main.css")

输出

<link rel="stylesheet" type="text/css" href="/main.css?131393346850223541" />

注意

如果您想知道var virtualpath = "/~" + ... 部分并思考，为什么不直接将其传递为"~/main.css"？我以这种方式实现了这个功能，因为我所有的 css 文件都在一个公共文件夹（/assets）中，并且帮助程序会在我的输出前加上公共文件夹名称，即/assets/main.css?131393346850223541

【讨论】：

【参考方案3】：

我的方法是使用“查询字符串更改”方法绕过缓存（即使在浏览器和代理服务器中）。 由于我使用的是母版页，因此我像往常一样维护指向 CSS 的链接，但添加了一个 ID（此处命名为 cssStyleSheet）：

<head runat="server">
<link id="cssStyleSheet" href="~/Styles/Default.css" rel="stylesheet" type="text/css" />

然后在后面的代码中，我在 Page_Load 实现了这行代码，添加了一个类似“?t=5343423424234”的查询字符串。

Protected Sub Page_Load(…)

    If IsNothing(Application("CSSTicks")) = True Then
        Application("CSSTicks") = DateTime.Now.Ticks
    End If


    cssStyleSheet.Attributes("href") = cssStyleSheet.Attributes("href") & "?t=" & Application("CSSTicks")

End Sub

这是为什么呢？ 在 HTML 代码中，一些设计师可以很容易地更改 CSS 文件，而不会干扰一些“困难”的代码。 使用应用程序变量，我可以避免从我的服务器以及从客户角度（例如使用手机）花费带宽。

如果部署了新应用程序，Application 变量会自动重置，如果下载到浏览器（甚至通过代理），则会自动重置 CSS 的“新”版本。

【讨论】：

【参考方案4】：

对于 ASP.NET，后面的代码（您可以将其放在实用程序类或母版页中）：

public static string GetTimestampedUrl(string virtualPath)

  var realPath = HostingEnvironment.MapPath(virtualPath);
  var file = new FileInfo(realPath);

  return VirtualPathUtility.ToAbsolute(virtualPath) + "?" + file.LastWriteTime.ToFileTime();

然后在你的页面中：

<link href="<%= GetTimestampedUrl("~/screen.css") %>" rel="stylesheet" type="text/css" media="screen" />

【讨论】：

我喜欢您的解决方案，尽管它不能解决任何静态 .html 文件的问题，仅作为?x 文件。有趣的旁注：如果您尝试将上述代码实现为 MasterPage 或 Page 的扩展方法，那么它会失败。但是，如果您为页面创建一个基类并将其添加到那里，它就可以正常工作。 另外一个边缘案例问题：如果你有任何代码动态修改了头部中的控件集合，它会抛出 HttpException 80004005 "The Controls collection cannot be modified because the control contains code blocks (ie )。” 使用上述方法，您可以为您的 Page 创建一个基类并从 OnLoad() 覆盖中调用以下方法： 'code' private void SetHeaderTimestamps() HtmlHead head = (HtmlHead)Page .标题; foreach (System.Web.UI.Control cntl in head.Controls) if (cntl is HtmlLink) HtmlLink cssTag = (HtmlLink)cntl; cssTag.Href = Utility.GetTimestampedUrl(cssTag.Href); 【参考方案5】：

对于 Wordpress 用户，以下是代码

<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_url')."?d=".date( 'Ymd', time()); ?>" type="text/css" media="screen" />

或者更好的

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

干杯！

【讨论】：

【参考方案6】：

按 CTRL+F5 硬刷新网页上的所有内容，包括脚本和样式表。

此外，您可以合并从动态服务器页面 [php/asp.net] 提供的样式表和 Response.Expires = -1，这将强制客户端在每个 HTTP-GET 请求上显式加载 css。您也可以在 CSS mime 类型的网络服务器设置中执行此操作。

【讨论】：

@Mark：这一直对我有用。在所有浏览器中都是一样的。 这可以强制文件更新，以避免缓存，但它不是您的用户的永久解决方案。文件最后修改时间的最后一次更新unix时间似乎是一个很好的解决方案。 在 Chrome/Windows 中，您可以按 F12 打开开发人员窗口。返回到您的页面选项卡和 RMC 的 Reload（圆圈箭头）图标并选择“Empty Cache and Hard Reload”。然后关闭开发窗口。比转到设置并从那里删除缓存要容易得多。【参考方案7】：

最简单的方法是在浏览器中禁用缓存。如果你不能或不想这样做，你可以按 ctrl+f5。

您的服务器或 asp 应用程序也可能正在缓存。您可以在 web.config 中禁用此功能，也可以重新启动开发服务器以确保向用户显示最新版本的文件。

【讨论】：

【参考方案8】：

这是一个经典问题。您有很多可用的解决方案：

    可能最简单的方法是将您的网络服务器配置为服务器 CSS 文件为永不缓存/立即过期。显然，您不希望在生产环境中使用它。使用 IIS，这很容易做到。 为您要包含的文件的名称添加一个随机值，例如站点.css?v=12。这就是 SO 为他们的包含所做的。我在内部执行此操作，以便在开发机器上，每次提供文件时（一个 guid）参数都会更改，但在部署时它使用 svn 版本号。有点棘手，但更强大。 我确定还有很多很多

【讨论】：

我正在使用 ASP.Net 开发服务器。有没有办法根据您的第一个建议进行配置？【参考方案9】：

一个技巧是在样式表的链接中添加一个 QueryString 参数

What does '?' do in a Css link?

【讨论】：

【参考方案10】：

我使用这个技巧：

<link rel="stylesheet" type="text/css" href="cssfile.css?t=<%= DateTime.Now.Ticks %>" media="screen" />

【讨论】：

我在生产服务器上有一个奇怪的行为。生成的 html 有：。这仅适用于样式表 - 脚本可以正常工作。有什么建议吗？ 这个答案的问题是它总是会强制你的客户下载你的样式表——即使服务器上的样式表没有改变。接受的答案更好，因为样式表只有在修改后才会被客户端重新下载。 @Muxa 你找到解决方案了吗？我有同样的问题 你可以这样写：href="css/style.css?t="【参考方案11】：

“缓存破坏”的一种流行方式是将参数附加到您的 css 源。通常使用时间戳。我更喜欢“文件上次修改”时间，即。 filemtime() 在 PHP 中。我确定有一个 asp.net 函数可以为您提供。

那么你的 CSS 标签就变成了：

<link rel="stylesheet" type="text/css" media="screen" href="/main.css?123456789"/>

无论何时更新 CSS 文件，查询参数都会发生变化。

【讨论】：

感谢工作完美，对功能没有任何影响。【参考方案12】：

我不确定所有浏览器，但在 IE8 中您可以使用开发人员工具...

转到：

工具 -> 开发者工具 (F12)

然后（在您的页面上）在开发者工具中：

缓存 -> 始终从服务器刷新

【讨论】：

【参考方案13】：

您是否在更改之间保持浏览器打开？通常在对 CSS 文件进行更改之间关闭所有浏览器窗口会告诉浏览器下载一个新副本。

【讨论】：

这可行，但 Firefox 启动速度太慢，无法选择

以上是关于我的html文件css样式表修改后其他浏览器可以显示，但是谷歌的显示还是以前的样式是怎么回事的主要内容，如果未能解决你的问题，请参考以下文章

HTML中CSS外部样式表

我用的phpcms自定义表单，可以修改from表单样式，如果自己做需要添加数据库，创建form表单么

前端- css - 总结

Confluence 6 CSS 编辑技巧

HTML5 css 初始化

为啥在html中调用外部css样式表没有效果