如何重置或覆盖 IE CSS 过滤器？

我正在使用所有权 MS‘ filter’属性来尝试创建一个不难看的等价物 css3文本阴影和盒子阴影;

在遇到这个问题之前，我一直做得很好。它看起来像是当我将一个过滤器应用到另一个 div 中的一个 div 时，这个 div 也有一个过滤器，过滤器效果最终会合并到子对象上。

I've tried using filter:none; to do a reset but no joy. I've also tried different variations on the syntax, ie "-ms-filter: 'progid:...Glow()'", "filter: progid:...Glow()", "filter: Glow()", etc..

IE8测试

62446 次浏览
小开
最佳答案

I've had some success by positioning the children absolute or relative. This didn't seem to work earlier though so it may break again once I get more complicated

I think once a parent has a filter applied all of it's children essentially become directx surfaces internally. You can still select text but it lags. I think text selection is a hack which makes each letter a seperate surface. It's a shitty mess which goes a long way to explaining why the browser in general and filters in particular are so buggy.

小开

Have you tried to enable/disable the filter(s)?

小开

try this:

filter: -;

小开

There is boolean attribute enabled, for which you can set false or true http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

Example:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
小开

I've found the best way is display:inline-block (applying white-space:nowrap to the container). But it seems to work bad with IE7 and lower

小开

If you're using HTML5 you may want to go down the route of using 

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

and in your CSS use something like:

.ie9 .element {filter: none; }
小开

The -ms-filter property is a non-standard, browser-specific CSS entry and as such requires that its parameter is enclosed with quotation marks. So -ms-filter: "none" will work just fine.


提交答案