如何重置或覆盖 IE CSS 过滤器？
Posted
技术标签:
【中文标题】如何重置或覆盖 IE CSS 过滤器？【英文标题】：How do I reset or override IE CSS filters? 【发布时间】：2010-12-18 14:20:29 【问题描述】：我正在使用专有的 MS 'filter' 属性来尝试创建一个不丑的等效于 css3 text-shadow 和 box-shadow；
在遇到这个问题之前，我实际上做得很好。看起来当我将过滤器应用于另一个也有过滤器的 div 内的 div 时，过滤器效果最终会组合在子对象上。
我尝试过使用 filter:none;做一个重置但没有快乐。我还尝试了不同的语法变体，即“-ms-filter: 'progid:...Glow()'”、“filter: progid:...Glow()”、“filter: Glow()”等。
在 IE8 中测试
【问题讨论】：
这对我有用：filter:;
过滤器:;不适用于lessphp css 预处理器，过滤器：-；不过确实如此。
使用 filter: ; 。我猜这将迫使 IE 一起删除该属性，因为它不是有效值。
使用 SCSS，我不得不使用 filter:none; 来避免语法错误。
【参考方案1】：
-ms-filter 属性是非标准的、特定于浏览器的 CSS 条目，因此要求其参数用引号引起来。所以 -ms-filter: "none" 可以正常工作。
【讨论】：
【参考方案2】：如果您使用的是 html5，您可能希望继续使用
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="gtie9 modern">
<!--<![endif]-->
在你的 CSS 中使用类似的东西：
.ie9 .element filter: none;
【讨论】：
【参考方案3】：我发现最好的方法是 display:inline-block （将 white-space:nowrap 应用于容器）。但它似乎在 IE7 及更低版本上运行不佳
【讨论】：
【参考方案4】：有一个布尔属性启用，可以设置false或true http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
例子：
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
【讨论】：
谢谢！这对我两个有用。我有一个讨厌的背景样式，无论我怎么努力都不会消失，也找不到它。 谢谢！按钮的渐变过滤器不能很好地与带有背景图像的某些按钮一起使用 - 过滤器会覆盖图像...... 工作就像一个魅力！谢谢！【参考方案5】：试试这个：
过滤器：-;
【讨论】：
在 IE7 中为我工作 while -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";没有。谢谢 @SimonArnold "-ms-filter" 仅支持 IE8 及以上版本； IE7 只支持“过滤器”属性。见msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx。【参考方案6】：我通过绝对或相对定位孩子取得了一些成功。不过，这似乎没有更早的工作，所以一旦我变得更复杂，它可能会再次中断
我认为一旦父级应用了过滤器，它的所有子级本质上都会在内部变成 directx 表面。您仍然可以选择文本，但它会滞后。我认为文本选择是一种技巧，它使每个字母成为一个单独的表面。这是一团糟，这在很大程度上解释了为什么一般的浏览器和特别是过滤器如此有问题。
【讨论】：
【参考方案7】：您是否尝试过enable/disable 过滤器？
【讨论】：
它不起作用，你不能覆盖孩子的父母过滤器。以上是关于如何重置或覆盖 IE CSS 过滤器？的主要内容，如果未能解决你的问题，请参考以下文章