rgba 背景与 IE 过滤器替代：IE9 呈现两者！答案

【问题标题】：rgba background with IE filter alternative: IE9 renders both!rgba 背景与 IE 过滤器替代：IE9 呈现两者！
【发布时间】：2011-09-24 06:24:01
【问题描述】：

我正在尝试混合使用 CSS3 rgba() 和微软的 filter 属性，使 div 的背景透明，如下所示：

div {
    width: 200px;
    height: 200px;
    /* blue, 50% alpha */
    background: rgba(0,0,255,0.5);
    /* red, 50% alpha */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}

正如预期的那样，支持rgba() 的浏览器会将 div 呈现为蓝色，而 IE 6-8 会将其呈现为红色。

IE9 显然可以同时处理这两种情况（之前我认为filter 支持已被删除），结果是一个紫色 div。有没有办法让 IE9 支持这些属性中的任何一个而不支持另一个？ rgba() 显然是首选。

注意我正在使用 IETester 运行这些测试。如果正确构建的 IE9 不能做到这一点，请告诉我。

【问题讨论】：

标签： css internet-explorer-9

【解决方案1】：

看看使用条件 cmets 的浏览器/版本定位。您需要针对特定版本的 IE 并实现每个版本的样式。

http://www.positioniseverything.net/articles/cc-plus.html

【讨论】：

【解决方案2】：

我想出了一个我认为我会分享的 hacky 解决方法。

IE9 及以上版本支持:not() CSS 伪选择器。通过使用元素上不存在的属性，我们可以让 IE9 禁用它的 filter 渐变：

div {
    width: 200px;
    height: 200px;

    /* For FF, Chome, Opera, IE9+ */
    background: rgba(0,0,255,0.5);

    /* For IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}

div:not([dummy]) {
    /* IE9 only */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}

我最终使用了这个，因为我的透明 div 只有一次功能。与在 HTML 中使用条件 cmets 相比，将内容保留给 CSS 似乎也更简洁一些。

编辑：为了支持其他答案，我发现 Microsoft 开发团队的 this article 鼓励开发人员使用条件 cmets，而不是像我这样的 CSS 变通办法。

【讨论】：

正是我一直在寻找的。谢谢！

【解决方案3】：

这似乎对我有用（未在所有版本中完全测试）。根据this 博客中的讨论，:root 选择器仅在 IE9 中可用，因此可以编写下面的代码来删除 IE9 中的所有过滤器设置。

:root *
{
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}

编辑：!important 需要确保它在所有地方都能正常工作。

【讨论】：

根据Web Essentials，你永远不应该使用通用选择器，因为它对浏览器渲染有很大的负面性能影响。好消息是:not([dummy]) 可以换成:root *

【解决方案4】：

如果您使用的是 HTML5，您可能希望继续使用

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="gtie9 modern">
<!--<![endif]-->

在你的 CSS 中使用类似的东西：

.ie9 .element {filter: none; }

【讨论】：

【解决方案5】：

最简单最可靠的过滤方法：兼容性我发现使用代码http://www.colorzilla.com/gradient-editor/生成：

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

然后将gradient CSS 类添加到需要它的元素。就是这样。

虽然条件 cmets 仍然有点小题大做，但在我看来，它们不如通用选择器或 :not 之类的，而且没有性能风险。

请记住，Microsoft 从 IE10 及更高版本中删除了条件 cmets，但这些版本几乎不需要它们。

我也不相信IETester；从https://www.modern.ie/en-gb 下载具有正确 IE9 的虚拟机 - 它是免费的；您所需要的只是时间和磁盘空间（保留原始下载，以便在过期时重新安装。）

【讨论】：