IE 中的多个 CSS 过滤器答案

【问题标题】：Multiple CSS filters in IEIE 中的多个 CSS 过滤器
【发布时间】：2012-07-25 04:25:07
【问题描述】：

我只是想知道是否可以使用 CSS 在 IE 中应用两种不同的过滤器。所以，我需要使用透明的 PNG 以及对div 的一些不透明度。可以同时使用吗？

我的透明制造线如下所示：

li.item .item-texture {
   background: none transparent scroll repeat 0% 0% !important; 
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ie/articles/item-content-hov.png', sizingMethod='scale') !important;
}

我尝试再添加一行（filter: alpha(opacity=50);）并用逗号分隔过滤器（..'scale') !important, alpha(opacity=50);），但没有用。

【问题讨论】：

你选择的答案是错误的..参考第二个答案...

标签： css internet-explorer filter opacity transparent

【解决方案1】：

抱歉，上面选择的答案不正确。您可以在 IE 中应用多个过滤器，但它们需要用一个或多个空格分隔。

空格前的逗号也可以使用，但前提是它跟在右括号之后。因此，没有gray 等参数的 IE 4.0 过滤器在这种情况下不起作用。最好只使用空格作为分隔符。

如果您转到上面给出的链接：http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx，然后单击following example link（当然是在 IE 中），您会看到第二张图像同时应用了旋转和模糊。从“查看源代码”来看，图片标签为：

<img id=image2 src="/workshop/samples/author/dhtml/graphics/sample.jpg" 
     style="filter:progid:DXImageTransform.Microsoft.Blur(strength=50), 
                   progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"
     height="165px" width="256px" border="0" alt="ocean beach">

我已经在某种程度上成功地模拟了 IE7 和 8 中盒子阴影的“传播”（尽管成功取决于您认为它看起来的可接受程度），使用：

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=0)
        progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=90)
        progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=180)
        progid:DXImageTransform.Microsoft.Shadow(Color=#c5c1ae, Strength=10, Direction=270);

这样阴影就会从 div 的各个侧面扩散开来。我还在包含渐变的 div 上组合了阴影。然而，这并非一帆风顺。在上面的例子中，阴影有布局，你必须调整边距以适应它们的大小。此外，由于 IE 是 IE，其中一些过滤器的组合可能会产生意想不到的后果，从而导致开发变通方法、放弃方法以及拔掉头发。

在您问题的原始示例中，如果您列出多个过滤器，则前一个过滤器将被后续过滤器覆盖，就像任何其他 CSS 属性一样。在您的第二个示例中，“！important”必须完全位于样式的末尾，否则整个 CSS 块会因为格式错误而被丢弃。（实际上， !important 需要完全抛弃。您需要使用它的唯一原因是，如果您正在开发第三方代码并且需要保护您的标签免受另一个 !important-happy 开发人员的影响，您无法控制他们. 如果您的样式被无意覆盖，您需要更具体的声明。）

【讨论】：

应该注意，在 IE 8 中，如果你有过滤器，空格就不起作用。将需要逗号。

【解决方案2】：

过滤器属性不能超过 1 个，因为 IE 只会使最后一个生效。

注意：由于这似乎得到了一些反对票，我想澄清这并不意味着您不能应用多个过滤器，只是您只能使用 1 filter 属性。如果您尝试应用多个过滤器并将它们分成多个属性，则只有最后一个会生效。

根据MSDN的以下文章，它们不是用逗号而是用空格分隔的：http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

另请注意，某些 IE 过滤器（包括 alpha）要求元素具有布局才能正确应用：http://www.satzansatz.de/cssd/onhavinglayout.html

【讨论】：

所以还是一块... (:

【解决方案3】：

逗号被忽略。您需要一个空格或换行符来粘贴多个过滤器。

progid:xxx progid:yyy / works

progid:xxx, progid:yyy / works

progid:xxx  
progid:yyy / works

progid:xxx,progid:yyy / will not work

【讨论】：