Come faccio a reimpostare o sostituire i filtri CSS di IE?

89

Sto usando la proprietà proprietaria MS 'filter' per provare a creare un equivalente non brutto di css3 text-shadow e box-shadow;

In realtà stavo andando molto bene finché non ho riscontrato questo problema. Sembra che quando applico un filtro a un div all'interno di un altro div che ha anche un filtro, gli effetti del filtro finiscono per essere combinati sull'oggetto figlio.

Ho provato a usare il filtro: nessuno; fare un reset ma nessuna gioia. Ho anche provato diverse variazioni sulla sintassi, ad esempio "-ms-filter: 'progid: ... Glow ()'", "filter: progid: ... Glow ()", "filter: Glow ()" , eccetera..

Test in IE8

css filter internet-explorer

— SpliFF
fonte

8

Questo funziona per me:filter:;

— Web_Designer

1

filtro:; non funziona con il preprocessore css lessphp, filtro: -; lo fa però.

— David Meister,

utilizzare filter: ;. questo credo costringerà IE a rimuovere la proprietà tutti insieme in quanto non è un valore valido.

— Bhumi Singhal

3

Utilizzando SCSS, ho dovuto utilizzare filter:none;per evitare errori di sintassi.

— Nic Barbier

95

È presente un attributo booleano abilitato , per il quale è possibile impostare false o true http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

Esempio:

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

— el22or
fonte

1

Grazie! Questo ha funzionato per me due. Avevo uno stile di sfondo fastidioso che non sarebbe andato via e non riuscivo a trovarlo, non importa quanto ci provassi.

— racl101

Grazie! i filtri a gradiente per i pulsanti non funzionano bene con alcuni pulsanti con immagini di sfondo - il filtro viene sopra l'immagine ...

— Adam

Ha funzionato come un fascino! Grazie!

— Bogdan

20

La proprietà -ms-filter è una voce CSS non standard e specifica del browser e come tale richiede che il suo parametro sia racchiuso tra virgolette. Quindi -ms-filter: "none" funzionerà perfettamente.

— Pink Duck
fonte

16

prova questo:

filtro: -;

— browzah
fonte

Ha funzionato per me in IE7 mentre -ms-filter: "progid: DXImageTransform.Microsoft.gradient (enabled = false)"; non lo fece. Thx

— Simon Arnold

@SimonArnold "-ms-filter" è supportato solo da IE8 e versioni successive; IE7 supporta solo l'attributo "filtro". Vedi msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx .

— vee

6

Ho avuto un certo successo posizionando i bambini in modo assoluto o relativo. Questo non sembrava funzionare prima, quindi potrebbe rompersi di nuovo una volta che divento più complicato

Penso che una volta che un genitore ha applicato un filtro, tutti i suoi figli diventano essenzialmente superfici directx internamente. Puoi ancora selezionare il testo ma è in ritardo. Penso che la selezione del testo sia un trucco che rende ogni lettera una superficie separata. È un casino di merda che spiega perché il browser in generale ei filtri in particolare sono così difettosi.

— SpliFF
fonte

6

Se stai usando HTML5 potresti voler seguire la strada dell'utilizzo

<!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 nel tuo CSS usa qualcosa come:

.ie9 .element {filter: none; }

— John C
fonte

1

Hai provato ad abilitare / disabilitare i filtri?

— anddoutoi
fonte

2

non funziona, non puoi sovrascrivere un filtro dei genitori dal bambino.

— SpliFF

0

Ho trovato che il modo migliore è display: inline-block (applicando lo spazio bianco: nowrap al contenitore). Ma sembra funzionare male con IE7 e versioni precedenti

— max
fonte