2009-11-20 12 views
88

Ich benutze die "Filter" -Eigenschaft von proprietry MS, um ein nicht hässliches Äquivalent zu css3 text-shadow und box-shadow zu erstellen;Wie kann ich IE CSS-Filter zurücksetzen oder überschreiben?

Ich war wirklich wirklich gut, bis ich dieses Problem traf. Es sieht so aus, als wenn ich einen Filter auf ein div in einem anderen div anlege, das auch einen Filter hat, werden die Filtereffekte am Kind-Objekt kombiniert.

Ich kann es nicht erklären, viel besser als das, hier ist ein Demo: http://cableflow.dev.arc.net.au/test/filters.html

Ich habe versucht, mit Filter: none; einen Reset aber keine Freude machen. Ich habe auch verschiedene Varianten der Syntax ausprobiert, zB "-ms-filter: 'progid: ... Glow()'", "filter: progid: ... Glow()", "filter: Glow()" , etc ..

Testing in IE8

+8

Dies funktioniert für mich: 'Filter:;' –

+1

Filter :; funktioniert nicht mit lessphp css preprocessor, filter: -; tut es aber. –

+0

Verwenden Sie 'filter:;'. Dies wird den IE zwingen, die Eigenschaft alle zusammen zu entfernen, da es kein gültiger Wert ist. –

Antwort

6

ich durch die Positionierung der Kinder absolut oder relativ wenig Erfolg gehabt haben. Dies schien nicht früher zu funktionieren, aber es könnte wieder brechen, sobald ich komplizierter bin

Ich denke, sobald ein Elternteil einen Filter angewendet hat, sind alle Kinder im Wesentlichen DirectX Oberflächen intern geworden. Sie können zwar immer noch Text auswählen, dieser bleibt jedoch zurück. Ich denke, die Textauswahl ist ein Hack, der jeden Buchstaben zu einer separaten Oberfläche macht. Es ist ein beschissenes Durcheinander, das einen langen Weg zu erklären, warum der Browser im Allgemeinen und Filter im Besonderen so fehlerhaft sind.

+0

Arbeitete für mich. Danke vielmals! – molf

1

Haben Sie versucht, enable/disable die Filter (s)?

+2

Es funktioniert nicht, Sie können einen Elternfilter nicht vom Kind überschreiben. – SpliFF

16

versuchen Sie dies:

Filter: -;

+0

Arbeitete für mich in IE7 während -ms-filter: "progid: DXImageTransform.Microsoft.gradient (aktiviert = falsch)"; nicht.Thx –

+0

@SimonArnold "-ms-filter" wird nur von IE8 und höher unterstützt; IE7 unterstützt nur das Attribut "filter". Siehe http://msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx. – vee

95

Es gibt Boolesche Attribut aktiviert, für die Sie falsch oder wahr http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

Beispiel festlegen:

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

Für mich funktionierte das aber ich musste '! Wichtig' verwenden –

+1

Danke! Das hat für mich zwei geklappt. Ich hatte einen lästigen Hintergrundstil, der nicht verschwinden würde und ich konnte ihn nicht finden, egal wie sehr ich es versuchte. – racl101

+0

Danke! Gradientenfilter für Buttons spielen nicht gut mit bestimmten Buttons mit Hintergrundbildern - der Filter kommt über das Bild ... – Adam

0

ich der beste Weg gefunden habe, ist display: inline -block (Anwenden von Leerraum: nowrap auf den Container). Aber es scheint, mit IE7 schlecht zu arbeiten und unteren

6

Wenn Sie HTML5 verwenden möchten Sie vielleicht den Weg gehen zu verwenden

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

und in Ihrem CSS Verwendung so etwas wie:

.ie9 .element {filter: none; } 
20

Die Eigenschaft -ms-filter ist ein nicht standardmäßiger, browserspezifischer CSS-Eintrag. Daher muss der Parameter in Anführungszeichen gesetzt werden. So-ms-filter: "none" funktioniert einwandfrei.

Verwandte Themen