IE9, IE10 双浸 CSS opacity/filter答案

【问题标题】：IE9, IE10 double dipping CSS opacity/filterIE9, IE10 双浸 CSS opacity/filter
【发布时间】：2011-10-22 02:05:58
【问题描述】：

对于块元素的半透明背景，我有以下 CSS 样式：

/* FF, Chrome, Opera, IE9, IE10 */
background: rgb(255,255,255) transparent; 
background: rgba(255,255,255, 0.7); 
/* IE7, IE8 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);

在大多数情况下，这是可行的。然而，IE9 和 IE10 的双重浸入（过滤器和背景样式），所以我们得到了两次应用的叠加，它看起来很不透明。

如何防止这种情况发生？

干杯！

【问题讨论】：

标签： css internet-explorer filter opacity

【解决方案1】：

您可以将过滤器放在单独的样式表中并为其使用条件语句

<!--[if lt IE 9]>
    <link href="lowie-versions.css" rel="Stylesheet" />
<![endif]-->

我个人觉得这些很 hacky，但有时你只是需要它们

【讨论】：

OK 如果没有更好的弹出窗口，可能会在 html 中使用内联样式元素。不过你是对的，它很丑。
是的，而且你不会做不可接受的事情。许多精心设计的网页都有这些来对抗 IE 的怪癖。
请注意，IE10 不支持条件语句stackoverflow.com/questions/9900311/…

【解决方案2】：

在所有样式表的末尾试试这个：

*:not(#old_ie) {
     filter:progid:DXImageTransform.Microsoft.gradient(enabled=false) !important;
}

它对我有用。这样您就不需要单独的样式表了。

现在，如果有人能想出一个专门为 IE9“隔离”CSS 的好方法（没有 HTML 条件 cmets）……

【讨论】：

【解决方案3】：

这个solution怎么样？

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

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

“这取自boilerplated”然后你可以在你的html标签上使用类，这样你的类特定的IE8样式就会是这样的：

.yourclass {
  /* FF, Chrome, Opera, IE9, IE10 */
  background: rgb(255,255,255) transparent; 
  background: rgba(255,255,255, 0.7); 
}
.lt-ie9 .yourclass {
  /* IE7, IE8 */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);
}

我认为最好的工作流程

【讨论】：