Como faço para redefinir ou substituir os filtros CSS do IE?

89

Estou usando a propriedade 'filter' da propriedade MS para tentar criar um equivalente não feio para css3 text-shadow e box-shadow;

Na verdade, eu estava indo muito bem até encontrar esse problema. Parece que quando eu aplico um filtro a uma div dentro de outra div que também tem um filtro, os efeitos do filtro acabam sendo combinados no objeto filho.

Tentei usar o filtro: nenhum; para fazer um reset, mas sem alegria. Também tentei diferentes variações na sintaxe, ou seja, "-ms-filter: 'progid: ... Glow ()'", "filter: progid: ... Glow ()", "filter: Glow ()" , etc.

Testando no IE8

css filter internet-explorer SpliFF
fonte
8
Isso funciona para mim:filter:;
Web_Designer
1
filtro:; não funciona com o pré-processador css lessphp, filtro: -; faz embora.
David Meister
usar filter: ;. Isso eu acho que vai forçar o IE a remover a propriedade por completo, pois não é um valor válido.
Bhumi Singhal
3
Usando SCSS, tive que usar filter:none;para evitar erros de sintaxe.
Nic Barbier,

Respostas:

95

Há um atributo booleano habilitado , para o qual você pode definir falso ou verdadeiro http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

Exemplo:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
el22or
fonte
1
Obrigado! Isso funcionou para mim dois. Eu tinha um estilo de fundo incômodo que não desaparecia e não conseguia encontrar, não importa o quanto tentasse.
racl101
Obrigado! filtros de gradiente para botões não funcionam bem com certos botões com imagens de fundo - o filtro aparece sobre a imagem ...
Adam
Funcionou como um encanto! Obrigado!
Bogdan
20

A propriedade -ms-filter é uma entrada CSS específica do navegador não padrão e, como tal, requer que seu parâmetro seja colocado entre aspas. Portanto -ms-filter: "none" funcionará perfeitamente.

Pato rosa
fonte
16

tente isto:

filtro: -;

Browzah
fonte
Funcionou para mim no IE7 enquanto -ms-filter: "progid: DXImageTransform.Microsoft.gradient (enabled = false)"; não. Thx
Simon Arnold
@SimonArnold "-ms-filter" só é compatível com o IE8 e superior; O IE7 suporta apenas o atributo "filtro". Consulte msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx .
vee
6

Tive algum sucesso posicionando as crianças de forma absoluta ou relativa. Isso não parecia funcionar antes, então pode quebrar novamente quando eu ficar mais complicado

Eu acho que uma vez que um pai tem um filtro aplicado, todos os seus filhos se tornam essencialmente superfícies DirectX internamente. Você ainda pode selecionar o texto, mas ele fica lento. Acho que a seleção de texto é um hack que torna cada letra uma superfície separada. É uma bagunça de merda que explica por que o navegador em geral e os filtros em particular são tão problemáticos.

SpliFF
fonte
6

Se você estiver usando HTML5, convém seguir o caminho de usar 

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

e em seu CSS use algo como:

.ie9 .element {filter: none; }
John C
fonte
1

Você já tentou habilitar / desabilitar o (s) filtro (s)?

anddoutoi
fonte
2
não funciona, você não pode substituir um filtro de pais da criança.
SpliFF
0

Descobri que a melhor maneira é display: inline-block (aplicando white-space: nowrap ao contêiner). Mas parece funcionar mal com o IE7 e inferior

max
fonte