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，以便在最终实现该属性的浏览器中使用。在某个阶段，将删除对前缀规则的支持。

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

1 个答案: