IE9、IE10双蘸CSS不透明度/过滤器_Css_Internet Explorer_Filter_Opacity

IE9、IE10双蘸CSS不透明度/过滤器

css internet-explorer filter

IE9、IE10双蘸CSS不透明度/过滤器,css,internet-explorer,filter,opacity,Css,Internet Explorer,Filter,Opacity,对于块元素的半透明背景，我有以下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)

对于块元素的半透明背景，我有以下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采用了二次倾斜（滤镜和背景样式），因此我们得到了两次应用的覆盖，它看起来非常不透明

我如何防止这种情况发生

干杯

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

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

我个人觉得这些非常粗糙，但有时你只需要它们

在你所有的样式表末尾尝试一下：

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

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

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

这个怎么样

my oppion中最好的工作流

OK可能会在html中添加一个内联样式元素，如果没有更好的弹出窗口。但你是对的，这很难看。是的，你不会做不可接受的事情。许多精心设计的网页都有这些功能，以克服IE的怪癖。请注意，IE10不支持条件语句

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

<!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]-->

.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);
}