1

我正在通过Dan Cederholm为 Web Designers 编写 CSS3 。

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

我正在研究Navigating the Moon示例（从第 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”标准的浏览器中工作，而那些不支持的浏览器会忽略它。

我错过了什么吗？

4

1 回答 1

3

发布的代码似乎导致了所描述的现象，但仅限于 Quirks Mode。如果页面需要在 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);
}
于 2012-09-03T05:31:53.270 回答