Question

我正在尝试使用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()显然是首选。

N.B。我正在使用IETester来运行这些测试。如果IE9的正确版本没有这样做，请告诉我。

Answer 1

我想出了一个我认为我会分享的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只有一次。它似乎有点整洁，而不是在CSS中使用条件注释。

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

Answer 2

如果你正在使用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; }

Answer 3

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

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

编辑：！重要的是确保它在所有地方都有效。

Answer 4

使用条件评论查看浏览器/版本定位。您将希望定位特定版本的IE并实现每个版本的样式。

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

Answer 5

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

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

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

虽然有条件的评论仍然是一个黑客攻击，但在我看来，它们不如普遍的选择者或类似的：不存在而且没有性能风险。

请记住，微软放弃了IE10及以上版本的条件评论，但你几乎不需要这些版本。

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

rgba背景与IE过滤器替代：IE9渲染两者！

5 个答案: