CSS 带有 IE 过滤器替代品的 rgba 背景：IE9 呈现两者！
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6506085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
rgba background with IE filter alternative: IE9 renders both!
提问by Liam Newmarch
I'm trying use make a div's background transparent using a mixture of CSS3 rgba()and microsoft's filterproperty like this:
我正在尝试使用 CSS3rgba()和 microsoftfilter属性的混合使 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);
}
As expected, browsers that support rgba()will render the div as blue, whereas IE 6-8 will render it as red.
正如预期的那样，支持的浏览器rgba()会将 div 呈现为蓝色，而 IE 6-8 会将其呈现为红色。
IE9 can apparently handle both (previously I thought filtersupport had been removed) and the result is a purplediv. Is there any way of making IE9 support either of these properties but not the other? rgba()would obviously be preferred.
IE9 显然可以同时处理（以前我认为filter支持已被删除），结果是一个紫色的div。有没有办法让 IE9 支持这些属性中的任何一个而不支持另一个？rgba()显然是首选。
N.B. I am using IETester to run these tests. If the proper build of IE9 does not do this please let me know.
注意我正在使用 IETester 来运行这些测试。如果 IE9 的正确构建没有做到这一点，请告诉我。
回答by Liam Newmarch
I've come up with a hacky workaround that I thought I'd share.
我想出了一个我想分享的hacky解决方法。
IE9 and above supports the :not()CSS pseudo selector. By using an attribute that doesn't exist on an element we can get IE9 to disable it's filtergradient:
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');
}
I ended up using this because my transparent div only features once. It also seemed a little neater keeping things to CSS, rather than using conditional comments in the HTML.
我最终使用了它，因为我的透明 div 只有一次。与在 HTML 中使用条件注释相比，将内容保留在 CSS 中似乎也更简洁一些。
Edit:In support of other answers, I found this articlefrom the Microsoft dev team encouraging developers to use conditional comments, not CSS workarounds like mine.
编辑：为了支持其他答案，我发现这篇来自 Microsoft 开发团队的文章鼓励开发人员使用条件注释，而不是像我这样的 CSS 解决方法。
回答by John C
If you're using HTML5 you may want to go down the route of using
如果您使用的是 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]-->
and in your CSS use something like :
并在您的 CSS 中使用类似的内容：
.ie9 .element {filter: none; }
回答by Anttu
This seems to work for me (not fully tested in all versions). According to the discussions in thisblog the :root selector is only available in IE9 and thus the code below can be written to remove all filter settings in IE9.
这似乎对我有用（未在所有版本中进行全面测试）。根据此博客中的讨论，:root 选择器仅在 IE9 中可用，因此可以编写以下代码来删除 IE9 中的所有过滤器设置。
:root *
{
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}
Edit: !important needed to make sure it works in all places.
编辑： !important 需要确保它适用于所有地方。
回答by Anttu
Take a look at browser/version targeting using conditional comments. You'll want to target specific versions of IE and implement your styling per-version.
使用条件注释查看浏览器/版本定位。您需要针对特定版本的 IE 并针对每个版本实施您的样式。
回答by William Turrell
The simplest and most reliable method for filter: compatibility I've found uses the code http://www.colorzilla.com/gradient-editor/generates:
过滤器的最简单和最可靠的方法：我发现的兼容性使用http://www.colorzilla.com/gradient-editor/生成的代码：
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Then you add a gradientCSS class to the element that needs it. And that's it.
然后gradient向需要它的元素添加一个CSS 类。就是这样。
Although conditional comments are still a bit of a hack, in my opinion they're less so than universal selectors or the likes of :not and don't have the performance risks.
尽管条件注释仍然有点黑客，但在我看来，它们不如通用选择器或 :not 之类的，并且没有性能风险。
Remember that Microsoft dropped conditional comments from IE10 and above, but you should almost never need them for those versions.
请记住，Microsoft 从 IE10 及更高版本中删除了条件注释，但您几乎不需要在这些版本中使用它们。
I wouldn't trust IETester either; download a virtual machine with proper IE9 on from https://www.modern.ie/en-gb- it's free; all you need is time and disk space (keep the original download so when it expires you can just reinstall.)
我也不相信 IETester；从https://www.modern.ie/en-gb下载具有适当 IE9 的虚拟机- 它是免费的；您所需要的只是时间和磁盘空间（保留原始下载，以便当它到期时您可以重新安装。）
