用IE过滤器替代rgba背景：IE9呈现两者！
我正在尝试使用CSS3 rgba()和microsoft的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()显然是首选。
NB我正在使用IETester来运行这些测试。 如果IE9的正确版本不这样做，请让我知道。
我想出了一个我认为我会分享的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中使用条件注释。
编辑：为了支持其他答案，我发现微软开发团队的这篇文章鼓励开发人员使用条件注释，而不是像我的那样的CSS解决方案。
如果你使用的是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; }
这似乎适用于我（未在所有版本中完全测试过）。 根据本博客中的讨论：根选择器仅在IE9中可用，因此可以编写下面的代码来删除IE9中的所有过滤器设置。
:root *
{
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}
编辑：！重要的是确保它在所有地方都能正常工作。
链接地址: http://www.djcxy.com/p/89327.html上一篇: rgba background with IE filter alternative: IE9 renders both!