IE9, IE10 双浸 CSS opacity/filter
Posted
技术标签:
【中文标题】IE9, IE10 双浸 CSS opacity/filter【英文标题】：IE9, IE10 double dipping 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 的双重浸入（过滤器和背景样式），所以我们得到了两次应用的叠加，它看起来很不透明。
如何防止这种情况发生？
干杯！
【问题讨论】：
【参考方案1】：您可以将过滤器放在单独的样式表中并为其使用条件语句
<!--[if lt IE 9]>
<link href="lowie-versions.css" rel="Stylesheet" />
<![endif]-->
我个人觉得这些很 hacky，但有时你只是需要它们
【讨论】：
OK 如果没有更好的弹出窗口，可能会在 html 中使用内联样式元素。不过你是对的，它很丑。 是的，而且你不会做不可接受的事情。许多精心设计的网页都有这些来对抗 IE 的怪癖。 请注意，IE10 不支持条件语句***.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);
我认为最好的工作流程
【讨论】：
以上是关于IE9, IE10 双浸 CSS opacity/filter的主要内容，如果未能解决你的问题，请参考以下文章
兼容模式下ie9和ie10显示样式在不兼容模式下为啥不加载css样式？