Question

我正在通过Dan Cederholm为网页设计师 CSS3工作。

我在公司环境中，当然必须考虑浏览器至少回到IE7（如果不是IE6！ - eek！）。

我正在完成导航月亮示例（从第36页开始）。

作者正在谈论在CSS中使用回退值来优雅地降级。

到目前为止一切顺利。我在船上，只是想试一试。

问题在于，当我在IE 9上看到这个例子时，我得到了一些奇怪的结果。

以下是我页面的<body>标记的内容：

<ul id='nav'>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

正如您所看到的，它是非常基本。

以下是我尝试使用的CSS：

body {
  background: #000;
}
ul#nav {
  float: right;
  padding: 42px 0 0 30px;
}
ul#nav li {
  float: left;
  margin: 0 0 0 5px;
}
ul#nav li a {
  font-weight: bold;
  padding: 5px 15px;
  text-decoration: none;
  color: #cccccc;
  color: rgba(255, 255, 255, 0.7);
}

当我在Safari中查看页面时，一切正常，CSS显示正确（如预期的那样）。当我在IE 9中查看此页面时，链接是正常的“HyperLink”蓝色（就像它只是忽略了两个color指令）。如果我从CSS中删除“rgba”行，则链接会显示在#cccccc中。如果我将“rgba”行替换为color: #000000，则链接会消失（正如预期的那样，因为正文也是#000000）。

根据作者的写作，我认为放置第二行可以在支持“rgba”标准的浏览器中使用，而那些不支持“rgba”的浏览器会被忽略。

我错过了什么吗？

Answer 1

发布的代码似乎导致了所描述的现象，但仅限于Quirks模式。如果页面需要在Quirks模式下工作，那么我担心你需要考虑笨拙的解决方法，例如使用带有后备代码副本的“条件IE注释”，在基本样式表之后显示，这样就会覆盖那里的相关设置（在IE小于9的情况下）。实施例;

<style>
/* the basic style sheet here */
</style>
<!--[if IE lt 9]>
ul#nav li a {
  color: #cccccc;
}
<![endif]-->

编辑：似乎在Quirks模式下，IE通常表现为具有无法识别的值的声明甚至会导致先前设置的值被删除。例如。 h1 { color: red; color: nonsense }将h1保留为默认颜色，而不是红色。但这仅适用于CSS规则。如果将声明放在单独的规则中，问题就会消失。

所以在这里，例如，您可以将ul#nav li a的规则分为两部分：

ul#nav li a {
  font-weight: bold;
  padding: 5px 15px;
  text-decoration: none;
  color: #cccccc;
}
ul#nav li a {
  color: rgba(255, 255, 255, 0.7);
}

CSS3上的CSS3优雅降级

1 个答案: