直到刷新才应用 CSS 样式答案

【问题标题】：The CSS style not applied until refresh直到刷新才应用 CSS 样式
【发布时间】：2013-09-18 18:52:07
【问题描述】：

我有一个具有以下 CSS 样式的网页，它覆盖了一些更高级别的样式。

#pnlActions { 
    background-image: -webkit-gradient(linear,left top,left bottom,from(#000),to(#000));
    background-image: -webkit-linear-gradient(#000,#000);
    background-image: -moz-linear-gradient(#000,#000);
    background-image: -ms-linear-gradient(#000,#000);
    background-image: -o-linear-gradient(#000,#000);
    background-image: linear-gradient(#000,#000);               
}

奇怪的是，当我第一次加载页面时，样式会被完全忽略，直到我刷新页面 - 然后才会应用样式。然后我将退出浏览器，再次加载页面，不再应用样式（直到我刷新页面）。

我可以通过 chrome/firefox/ie 浏览器工具了解这一切。

我完全无法解释为什么会发生这种情况。有任何想法吗？

【问题讨论】：

可能有 Javascript 或覆盖样式的扩展。
缓存有什么东西吗？
发布整个代码！没有可以通过只看 css 来完美地回答你的错误！
我遇到了同样的问题。这是我的 JavaScript，所以我设置了一个超时函数，设置为在页面加载后 3 秒执行，此后每次都有效。

标签： html css browser google-chrome-devtools

【解决方案1】：

几年后，但我就是这样解决的。

由于某种原因，在 HEAD 标记（内部 CSS）中包含 STYLE 仅在刷新后才有效。

但是将其添加为 LINK（外部 CSS）解决了它。现在它从第一次运行开始就可以工作了。

在 CSS 中，我将 !IMPORTANT 添加到样式中，因为我需要覆盖一些其他元素，就像 OP 一样。

如果对如何添加内部或外部 CSS 有疑问，请查看link。

【讨论】：

这正是我所需要的，将所有自定义初始 css 放在一个文件中并通过 HEAD 导入以在页面刷新时应用...谢谢！

【解决方案2】：

尝试将以下 php 代码附加到您的 .css 文件的标题中。您的文件必须具有 .php 的扩展名才能正常工作。

<link rel="stylesheet" type="text/css" media="screen" href="your.css?<?php echo time(); ?>" />

这将排除样式表的缓存。

【讨论】：

【解决方案3】：

如果您在 Chrome DevTools 关闭的情况下加载页面，打开 DevTools，然后刷新页面，并选中 setting“禁用缓存（在 DevTools 打开时）”，这可以解释您的体验。

【讨论】：

【解决方案4】：

在引用样式表之前，检查您的

中是否添加了内容。

我在装有 IE9 的 Win7 机器上遇到了同样的问题；也就是说，我的样式在我进行刷新之前不会被应用。在我的带有 IE8 的 XP 机器上没有出现问题；样式在初始加载时应用。

其他信息，可能会有所帮助：作为母版页的新手，我一直在关注“Beginning ASP.Net 4”。该示例让您在样式表链接之前的

中添加一个 ContentPlaceHolder（第 200 页，第 4 步）。示例 CPH 为空。然后他们让您将 asp:Content ID="Content1"... 添加到 pg 上的 ASPX。 203. 我把'Content1'放在这个标签里面，它把'Content1'放在浏览器输出的样式表链接之前。这不在说明中，我正在查看它是否会显示在浏览器中（确实如此）。我一直在刷新，所以 apply-stylesheet-only-on-refresh 问题直到很久以后才出现。在我的 ASPX 上删除“Content1”解决了这个问题——也许其他专家可以告诉我们为什么 IE9（但不是 IE8）在初始加载时遇到问题时停止处理内容，但在刷新时没有。

希望这能解决您的问题！

【讨论】：

【解决方案5】：

我刚刚解决了同样的问题。

当我收到错误时，我的代码看起来像这样：（简化为省略 -webkit -moz 等）

<div style="width: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%), url('relativePathToImg.png') repeat 0 0;">

我所做的是使用 chrome 开发工具，检查 div 然后选择“计算”选项卡，而不是“样式”选项卡。我注意到 chrome 是这样计算 css 的：

background-image: linear-gradient(rgba(255, 255, 255, 0.701961) 0%, rgba(255, 255, 255, 0.2) 100%), url(http://mywebsite.com/);

由于未知原因，相对 url 被转换为站点根 url，因此 css 正在寻找错误 url 的图像。然后我用图像的绝对路径替换了“relativePathToImg.png”。这解决了我的问题。

我注意到您没有在上面的代码中明确列出图像，但是您说样式已应用于其他地方。看看开发工具中的“计算”选项卡，看看到底发生了什么。

【讨论】：