web-dev-qa-db-fra.com

Comment réinitialiser ou remplacer les filtres CSS IE?

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

J'allais 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 la syntaxe, à savoir "-ms-filter: 'progid: ... Glow ()'", "filter: progid: ... Glow ()", "filter: Glow ()" , etc..

Test dans IE8

cssfilterinternet-explorer
89
SpliFF

J'ai eu un certain succès en positionnant les enfants de façon absolue ou relative. Cela ne semble pas avoir fonctionné plus tôt, donc cela risque de se casser à nouveau une fois que je serai 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 bordel de merde qui explique en grande partie pourquoi le navigateur en général et les filtres en particulier sont si bogués.

6
SpliFF

Il existe un attribut booléen 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)";
95
el22or

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

20
Pink Duck

essaye ça:

filtre: -;

16
browzah

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; }
6
John C

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

1
anddoutoi

J'ai trouvé que la meilleure façon était d'afficher: inline-block (en appliquant un espace blanc: nowrap au conteneur). Mais cela semble mal fonctionner avec IE7 et inférieur

0
max