6

我有一个具有以下 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 浏览器工具中看出这一切。

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

4

5 回答 5

6

几年后，但这就是我解决它的方法。

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

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

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

对于那些对如何添加内部或外部 CSS 有疑问的人，请查看此链接。

于 2018-08-07T03:30:32.813 回答
4

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

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

这将排除样式表的缓存。

于 2013-09-14T02:00:24.227 回答
2

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

于 2013-09-14T12:41:36.830 回答
1

在对样式表的引用之前，检查您的 <head> 中是否添加了内容。

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

附加信息，可能会有所帮助：作为母版页的新手，我一直在关注“Beginning ASP.Net 4”。该示例让您在样式表链接之前的 <head> 中添加一个 ContentPlaceHolder（第 200 页，第 4 步）。示例 CPH 为空。然后他们让您将 asp:Content ID="Content1"... 添加到 pg 上的 ASPX。203. 我把'Content1'放在这个标签里面，它把'Content1'放在浏览器输出的样式表链接之前。这不在说明中，我正在查看它是否会显示在浏览器中（确实如此）。我一直在刷新，所以 apply-stylesheet-only-on-refresh 问题直到很久以后才出现。删除我的 ASPX 上的“Content1”解决了这个问题——也许其他一些大师可以告诉我们为什么 IE9（但不是 IE8）停止处理 <head>

希望这能解决您的问题！

于 2013-10-11T13:05:30.093 回答
0

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

当我收到错误时，我的代码看起来像这样：（简化为省略 -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”。这解决了我的问题。

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

于 2014-01-04T07:46:35.550 回答