-1

这是大多数浏览器支持的示例样式：

.class {
     background: rgba(0,0,0,0.3);
 }

旧 IE (IE 6-8) 不支持rgba. 我至少可以使用三种方法来支持这一点。

  1. 同班

    .class {
     background: grey;
     background: rgba(0,0,0,0.3);
}

  2. 现代化

    .class {
     background: rgba(0,0,0,0.3);
}

.no-rgba .class {
     background: grey;
}

  3. 明星黑客

    .class {
     background: rgba(0,0,0,0.3);
     background: grey\9; /*IE8 and below*/
 }

我更喜欢使用方法 1 和 2，因为它们涵盖的不仅仅是 IE 浏览器，但我不确定应该使用哪种方法。

方法 1 很好，因为即使 JS 被禁用，它也可以工作。但是，所有现代浏览器都需要渲染一个额外的属性。

方法 2 很好，因为它将坏浏览器隔离到它们自己的类中。现代浏览器不会渲染这个类，这样可以节省几毫秒的渲染时间。

也许还有其他我没有想到的东西可能会更好？我想避免使用 PIE.htc 或过滤器。优化和加载时间的最佳方法是什么？

4

2 回答 2

2

对于这种风格，正确答案是您列出的第一个：

.class {
     background: grey;
     background: rgba(0,0,0,0.3);
}

首先指定回退选项，然后是首选选项。

IE 将背景设置为，grey因为它不支持rgba；其他浏览器将按rgba预期使用该版本。

这是最佳答案的原因是：

  1. 对于这个确切的场景，这是规范的“正确”答案：CSS 被设计为以这种方式工作，正是考虑到这种情况。

  2. 这是最便宜的选择，因为没有浏览器需要做任何额外的渲染或脚本。IE 将完全忽略第二个background，所以那里不会发生任何额外的事情；其他浏览器将同时解析两者，但解析第二个浏览器将覆盖已为第一个解析的内容，因此唯一的开销是解析，无论您选择哪个选项，都必须这样做。

在其他可能的解决方案中，Modernizr 非常棒，但对于这种情况来说过于矫枉过正——如果您有一个不涉及任何脚本的解决方案，则无需使用脚本解决方案。并且应该不惜一切代价避免 CSS hack。可能在某些情况下它们值得使用，但自从我停止尝试支持 IE6 以来，我个人还没有看到一个合法的用途。

另一个可用但您没有提到的解决方案是条件注释：即使用 IE 的<!--[if IE]>语法为 IE 加载替代样式表。但是，如果可能的话，我也会避免这种情况，而且，随着 IE6 和 IE7 成为更遥远的记忆，对这种解决方案的需求正在逐渐消失。

最后，给你一个稍微不同的选择：忽略旧的 IE。对于某些事情，IE8 可能无法按照您想要的方式呈现，而且这样做很痛苦。在这些情况下，让它失败是一个完全合理的策略。对于问题中的示例，这不是必需的，因为我们有一个非常好的 CSS 解决方案，但对于其他更复杂的样式，请考虑如果 IE 不正确，网站看起来会有多糟糕；如果它仍然可用，那么可能有一个简单的让它滑动的情况。此选项需要与将受到影响的用户数量及其对他们造成的问题的程度以及您正在努力满足的要求进行权衡，但应将其视为一个选项。

于 2013-03-05T20:37:41.383 回答
1

您的方法 #1 是普遍接受的方式，因为它不仅处理 IE，而且还处理任何不支持相关 CSS 的浏览器（在本例中为 RGBA）。浏览器应该遵循的 CSS 规则是，如果它们无法识别一行，它们会忽略它并继续前进。至于功能更强大的浏览器，像这样的 CSS 很便宜，而且浏览器甚至可能根本不渲染后备 CSS（我知道大多数人不会下载基于图像的后备的图像）。

方法 2 不仅添加了类（增加了权重），而且添加了整个 JavaScript 库。如果您正在处理一堆其他 CSS3 类型的东西（尤其是没有这么简单的后备的东西），那么这没什么大不了的，但是如果您用来处理诸如此类的后备，或者只是一个或二，那么你会增加很多开销（包括可能的另一个 HTTP 请求），而不会带来很多额外的好处。即使现代浏览器不呈现这些类，它们也必须运行 JavaScript 来检查功能。

方法 3是一种 hack，应尽可能避免（我建议使用条件样式表而不是诉诸 hack）。它不仅只针对特定浏览器的特定版本（从而使所有其他不支持此 CSS 的浏览器都被冷落），而且依赖于浏览器中的错误来完成工作。如果该代码在不同的浏览器中触发了不同的错误，或者如果浏览器识别出带有 hack 的行，但使用正确的 CSS 也能正常运行，会发生什么？看看 2005 年左右的一些教程，当时 IE6和IE5 for Mac 仍然是主要的竞争者，并且看到人们疯狂地使用浏览器黑客来防止他们踩到彼此的脚趾。（注意：我不认为带前缀的 CSS 是 hack。带前缀的 CSS 项是浏览器供应商选择添加的记录功能，并服务于沙箱化这些功能的既定目的。如果它们是为了使其成为标准的东西，那么它们旨在随着时间的推移逐步淘汰。）

因此，按照优先顺序 - Fallback CSS、Modernizr、Conditional Stylesheets、Browser Hacks。

于 2013-03-05T19:47:41.340 回答