CSS3上的CSS3优雅降级

Question

I'm working through CSS3 for Web Designers by Dan Cederholm. 我正在为 Dan Cederholm的Web设计师提供CSS3 。

I'm in a corporate environment and certainly have to consider browsers at least back to IE7 (if not IE6! - eek!). 我在企业环境中，当然必须考虑浏览器至少回到IE7（如果不是IE6！ - eek！）。

I'm working through the Navigating the Moon example (beginning on page 36). 我正在研究导航月球的例子（从第36页开始）。

The author is talking about using fallback values in your CSS to gracefully degrade. 作者正在谈论在CSS中使用回退值来优雅地降级。

So far so good. 到现在为止还挺好。 I'm on board and just want to give it a shot. 我在船上，只是想试一试。

The problem is that when I'm going through the example on IE 9, I'm getting some weird results. 问题是当我在IE 9上看到这个例子时，我得到了一些奇怪的结果。

Here's the content of the <body> tag for my page: 这是我的页面的<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>

As you can see, it's really basic. 如你所见，这是非常基本的。

Here's the CSS I'm trying to use: 这是我正在尝试使用的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);
}

When I view the page in Safari, all is well and the CSS shows correctly (as expected). 当我在Safari中查看页面时，一切正常，CSS显示正确（如预期的那样）。 When I view this page in IE 9, the links are the normal "HyperLink" blue (like it's just ignoring both color instructions). 当我在IE 9中查看此页面时，链接是正常的“HyperLink”蓝色（就像它只是忽略两种color指令一样）。 If I remove the "rgba" line from my CSS, the links show up in #cccccc . 如果我从CSS中删除“rgba”行，则链接会显示在#cccccc 。 If I replace the "rgba" line with color: #000000 , the links disappear (as expected, since the body is also #000000 ). 如果我用color: #000000替换“rgba”行，链接将消失（正如预期的那样，因为正文也是#000000 ）。

Based on what the author has written, I thought that placing the second line would work in browsers that support the "rgba" standard and just be ignored by those that don't. 根据作者所写的内容，我认为放置第二行可以在支持“rgba”标准的浏览器中使用，而那些不支持“rgba”标准的浏览器会被忽略。

Have I missed something? 我错过了什么吗？

Answer 1

The code posted seems to cause the phenomenon described, but only in Quirks Mode. 发布的代码似乎导致了所描述的现象，但仅限于Quirks模式。 If the page needs to work in Quirks Mode, then I'm afraid you need to consider clumsy workarounds like using “conditional IE comments” with a copy of the fallback code, presented after the basic style sheet so that this overrides the relevant setting there (on IE less than 9). 如果页面需要在Quirks模式下工作，那么我担心你需要考虑笨拙的解决方法，例如使用带有后备代码副本的“条件IE注释”，在基本样式表之后显示，这样就会覆盖那里的相关设置（在IE小于9的情况下）。 Example; 例;

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

EDIT: It seems that in Quirks Mode, IE generally behaves so that a declaration with unrecognized value causes even a previously set value to be dropped. 编辑：似乎在Quirks模式中，IE通常表现为具有无法识别的值的声明甚至导致先前设置的值被删除。 Eg h1 { color: red; color: nonsense } 例如h1 { color: red; color: nonsense } h1 { color: red; color: nonsense } leaves h1 to its default color, not red. h1 { color: red; color: nonsense }将h1为默认颜色，而不是红色。 But this only applies within a CSS rule. 但这仅适用于CSS规则。 If you put the declarations to separate rules, the problem disappears. 如果将声明放在单独的规则中，问题就会消失。

So here, for example, you could just divide the rule for ul#nav li a into two parts: 所以在这里，例如，您可以将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 个解决方案

解决方案1
3 已采纳 2012-09-03 05:31:53

CSS3上的CSS3优雅降级

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-09-03 05:31:53

解决方案1
3 已采纳 2012-09-03 05:31:53