Comment réinitialiser ou remplacer les filtres CSS IE?

89

J'utilise la propriété 'filter' de la propriété MS pour essayer de créer un équivalent non laid de css3 text-shadow et box-shadow;

Je me débrouillais vraiment bien jusqu'à ce que je rencontre ce problème. Il semble que lorsque j'applique un filtre à un div à l'intérieur d'un autre div qui a également un filtre, les effets de filtre finissent par être combinés sur l'objet enfant.

J'ai essayé d'utiliser le filtre: aucun; faire un reset mais pas de joie. J'ai également essayé différentes variantes de syntaxe, à savoir "-ms-filter: 'progid: ... Glow ()'", "filter: progid: ... Glow ()", "filter: Glow ()" , etc..

Test dans IE8

css filter internet-explorer

— Joint
source

8

Cela fonctionne pour moi:filter:;

— Web_Designer

1

filtre:; ne fonctionne pas avec le préprocesseur lessphp css, filtre: -; fait cependant.

— David Meister

utiliser filter: ;. cela, je suppose, forcera l'IE à supprimer la propriété ensemble car ce n'est pas une valeur valide.

— Bhumi Singhal

3

En utilisant SCSS, j'ai dû utiliser filter:none;pour éviter les erreurs de syntaxe.

— Nic Barbier

95

L'attribut booléen est activé , pour lequel vous pouvez définir false ou true http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

Exemple:

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

— el22or
source

1

Je vous remercie! Cela a fonctionné pour moi deux. J'avais un style d'arrière-plan embêtant qui ne disparaîtrait pas et je ne pouvais pas le trouver, peu importe mes efforts.

— racl101

Merci! les filtres dégradés pour les boutons ne jouent pas bien avec certains boutons avec des images d'arrière-plan - le filtre vient sur l'image ...

— Adam

A travaillé comme un charme! Je vous remercie!

— Bogdan

20

La propriété -ms-filter est une entrée CSS non standard, spécifique au navigateur et, en tant que telle, nécessite que son paramètre soit placé entre guillemets. Donc -ms-filter: "none" fonctionnera très bien.

— Canard rose
source

16

essaye ça:

filtre: -;

— browzah
source

A travaillé pour moi dans IE7 tandis que -ms-filter: "progid: DXImageTransform.Microsoft.gradient (enabled = false)"; pas. Thx

— Simon Arnold

@SimonArnold "-ms-filter" n'est pris en charge que par IE8 et plus; IE7 ne prend en charge que l'attribut "filtre". Voir msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx .

— vee le

6

J'ai eu un certain succès en positionnant les enfants absolus ou relatifs. Cela ne semble pas fonctionner plus tôt, donc cela peut se briser à nouveau une fois que je deviens plus compliqué

Je pense qu'une fois qu'un parent a appliqué un filtre, tous ses enfants deviennent essentiellement des surfaces Directx en interne. Vous pouvez toujours sélectionner du texte mais il est en retard. Je pense que la sélection de texte est un hack qui fait de chaque lettre une surface distincte. C'est un désordre merdique qui explique en grande partie pourquoi le navigateur en général et les filtres en particulier sont si bogués.

— Joint
source

6

Si vous utilisez HTML5, vous voudrez peut-être emprunter la voie de l'utilisation

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

et dans votre CSS, utilisez quelque chose comme:

.ie9 .element {filter: none; }

— Jean C
source

1

Avez-vous essayé d' activer / de désactiver le (s) filtre (s)?

— anddoutoi
source

2

cela ne fonctionne pas, vous ne pouvez pas remplacer le filtre des parents de l'enfant.

— SpliFF

0

J'ai trouvé que le meilleur moyen est display: inline-block (appliquant un espace blanc: nowrap au conteneur). Mais cela semble mal fonctionner avec IE7 et les versions antérieures

— max
source