html 在某些浏览器中不加载 css 文件

Question

我的html 没有加载css 样式文件。 Eclipse 提供的预览正确地显示了我在css 文件中所做的更改。另一方面，如果我使用 Firefox 加载文件，这些更改就消失了。如果加载到另一台机器上，也会发生这种情况。我清空了我的缓存等（使用 CCleaner）。但是，如果我用 IE 加载 html 文件，所有更改都是可见的。有趣的是，这仅适用于颜色。

我使用以下行包含css 文件：

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

相关css行：

 #menubar
{ width: 920px;
height: 50px;
text-align: center; 
margin: 0 auto;
background:     #000099;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d); 
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
} 

html中的行：

<div id="menubar">
  <ul id="menu">
    <li class="current"><a href="index.html">Home</a></li>
    <li><a href="PracticalInfo.html">Practical Information</a></li>
    <li><a href="people.html">People</a></li>
    <li><a href="programme.html">Programme</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div><!--close menubar-->  

Answer 1

根据评论：

我已将颜色更改为蓝色 #000099，但它仍保持之前的原始灰色

您有 4 条规则来设置背景颜色。

background:     #000099;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d); 

如果浏览器不支持该规则，则会依次应用每个规则并忽略该规则。

您只更改了第一条规则，这是 IE 支持的唯一规则。

由于 Firefox 支持 -moz-linear-gradient 继续覆盖之前的背景颜色规则，所以它被忽略了。

您也需要更改渐变规则。

但是请注意，-prefix- 规则是实验性的，通常应避免用于生产工作，并且您缺少用于具有该属性最终实现的浏览器的无前缀 linear-gradient。对前缀规则的支持将在某个阶段被删除。