Question

对于块元素的半透明背景，我有以下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双重倾斜（滤镜和背景样式），因此我们得到两次叠加，看起来非常不透明。

如何防止这种情况发生？

干杯！

Answer 1

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

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

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

Answer 2

这个solution怎么样？

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

Answer 3

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

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

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

现在，如果有人能够找到一个很好的方法来专门为IE9“隔离”CSS（没有HTML条件评论）......

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

我的竞争中的最佳工作流程

IE9，IE10双重浸入CSS不透明度/滤镜

4 个答案: