Kompass-hintergrund-Bild(linear-gradient) funktioniert nicht im IE

Diesen Farbverlauf gemacht mit SASS und Compass arbeiten nicht in einer beliebigen version von Internet Explorer:

@include background-image(linear-gradient(left, rgba(241,236,236,0.95), rgba(241,236,236,0.9), rgba(241,236,236,0.85), rgba(241,236,236,0.8), rgba(241,236,236,0.75), rgba(241,236,236,0.4)));

Er übersetzt diese CSS:

  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(241, 236, 236, 0.95)), color-stop(20%, rgba(241, 236, 236, 0.9)), color-stop(40%, rgba(241, 236, 236, 0.85)), color-stop(60%, rgba(241, 236, 236, 0.8)), color-stop(80%, rgba(241, 236, 236, 0.75)), color-stop(100%, rgba(241, 236, 236, 0.4)));
  background-image: -webkit-linear-gradient(left, rgba(241, 236, 236, 0.95), rgba(241, 236, 236, 0.9), rgba(241, 236, 236, 0.85), rgba(241, 236, 236, 0.8), rgba(241, 236, 236, 0.75), rgba(241, 236, 236, 0.4));
  background-image: -moz-linear-gradient(left, rgba(241, 236, 236, 0.95), rgba(241, 236, 236, 0.9), rgba(241, 236, 236, 0.85), rgba(241, 236, 236, 0.8), rgba(241, 236, 236, 0.75), rgba(241, 236, 236, 0.4));
  background-image: -o-linear-gradient(left, rgba(241, 236, 236, 0.95), rgba(241, 236, 236, 0.9), rgba(241, 236, 236, 0.85), rgba(241, 236, 236, 0.8), rgba(241, 236, 236, 0.75), rgba(241, 236, 236, 0.4));
  background-image: linear-gradient(left, rgba(241, 236, 236, 0.95), rgba(241, 236, 236, 0.9), rgba(241, 236, 236, 0.85), rgba(241, 236, 236, 0.8), rgba(241, 236, 236, 0.75), rgba(241, 236, 236, 0.4));

Also, was tun Sie, um dieses Problem zu lösen, die mit dem IE?

Ich bin testting es mit internet explorer 11. Ich brauche es für die Arbeit von IE9+

Als geholfen unten fand ich jetzt die Antwort auf cover IE10+, dies hat mir geholfen:

background: -ms-linear-gradient(left, rgba(241,236,236,0.95), rgba(241,236,236,0.9), rgba(241,236,236,0.85), rgba(241,236,236,0.8), rgba(241,236,236,0.75), rgba(241,236,236,0.4)); /* IE10+ */

Nachdem ich versuchte die folgenden für IE9 aber hat nicht funktioniert:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1ecec', endColorstr='#fffafa',GradientType=1 );

Was kann ich verwenden, um Abdeckung ärgerlich IE9?

Bitte geben Sie die IE-version(en), die Sie testen wollen, und auch die Versionen, die Sie brauchen, es zu arbeiten in. CSS-Verläufe benötigen eine unterschiedliche syntax in älteren IE-Versionen.
Ich fügte hinzu, die version die ich auf die Frage. Ich brauche es für die Arbeit von IE9+

InformationsquelleAutor Daniel Ramirez-Escudero | 2013-11-15

3

Verwenden Sie einen filter für IE6-9, die wie folgt aussieht:
```
filter: progid:DXImageTransform.Microsoft.gradient(...)
```
und für den IE10+
```
-ms-linear-gradient
```
Ich glaube, der IE6-9 unterstützen möglicherweise nur 2 Farben hält. Das beste, was ich geben kann, Ihnen zu helfen ist:

http://www.colorzilla.com/gradient-editor/

Wunderbares Werkzeug für dieses Zeug 🙂

Wenn Sie "import" css in das tool erhalten Sie:
```
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZWNlYyIgc3RvcC1vcGFjaXR5PSIwLjk1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2YxZWNlYyIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWVjZWMiIHN0b3Atb3BhY2l0eT0iMC40Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(241,236,236,0.95) 0%, rgba(241,236,236,0.75) 80%, rgba(241,236,236,0.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,236,236,0.95)), color-stop(80%,rgba(241,236,236,0.75)), color-stop(100%,rgba(241,236,236,0.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(241,236,236,0.95) 0%,rgba(241,236,236,0.75) 80%,rgba(241,236,236,0.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(241,236,236,0.95) 0%,rgba(241,236,236,0.75) 80%,rgba(241,236,236,0.4) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(241,236,236,0.95) 0%,rgba(241,236,236,0.75) 80%,rgba(241,236,236,0.4) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(241,236,236,0.95) 0%,rgba(241,236,236,0.75) 80%,rgba(241,236,236,0.4) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f1ecec', endColorstr='#66f1ecec',GradientType=0 ); /* IE6-8 */
```
Unterstützung für volle multi-stop-Gradienten mit IE9 (mit SVG).
Fügen Sie eine "gradient" - Klasse, um alle Ihre Elemente haben einen Farbverlauf, und fügen Sie die folgenden überschreiben, um Ihre HTML-zum Abschluss der IE9-Unterstützung:
```

```
... oder sogar die SCSS version
```
//needs latest Compass, add '@import "compass"' to your scss
@include filter-gradient(#f2f1ecec, #66f1ecec, vertical); //IE6-8
//IE9 SVG, needs conditional override of 'filter' to 'none'
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top,  rgba(241,236,236,0.95) 0%,rgba(241,236,236,0.75) 80%,rgba(241,236,236,0.4) 100%));
```
Heres ein link zu den importierten css, die sollten dir helfen: http://www.colorzilla.com/gradient-editor/#f1ecec+0,f1ecec+100&0.95+0,0.75+80,0.4+100;Benutzerdefinierte
- IE10+ erfordert nicht -ms-. Keine stabile version des IE nutzt -ms- für Farbverläufe. Jede Quelle, die etwas anderes sagt, ist falsch.
- Stimmt, es keine stabile version gibt, die Ihre consumer preview version angeblich. Aber nicht verletzt, indem es in, wenn Sie gehen, um zu unterstützen, alle anderen browser-Präfixe, können Sie auch eine weitere 😛
- Sicher, wenn Sie wollen, um unnötigen Ballast zu Ihrem stylesheet, mit allen Mitteln, aber bitte don ' T empfehlen es für andere. Es ist die Art von Haltung, die macht Präfixe so spröde.
- Sie nennen, ist unnötig aufblasen, ich nenne es deckt alle Grundlagen. Sicher, dass es ein kleiner Prozentsatz der Marktanteil, nutzt der browser, aber wenn du gehst, zu gehen, um die Länge zu unterstützen, alles andere, sehe ich kein Problem mit ihm. Ich würde eher die Informationen und lassen ihn die Entscheidung treffen, als vermute ich weiß, was das beste für ihn.
- Ich habe versucht, Ihre Lösung und wenn ich fügte hinzu, die ms-Präfix. er arbeitete für IE10+. Aber danach habe ich versucht filter: progid:DXImageTransform.Microsoft.Verlauf (...), aber es funktioniert nicht im IE9, die ich brauche um zu decken! So IE10+ gute, IE9 nicht gut
- wenn Sie kreuzen die IE9 Support checkbox unter dem code auf der colorzilla-link, es wird Ihnen eine zusätzliche bit-code und Erklärung. Im wesentlichen haben Sie zum Abbrechen der filter, die Sie hinzufügen für IE6-8-Unterstützung und die Verwendung einer SVG durch die Blicke von ihm. Siehe mein edit
- Ich habe diesen aus, aber ich verstehe wirklich nicht, was Sie tun müssen... Es scheint, Sie müssen Abbrechen, der filter für IE6-8 und filter einsetzen keine. Aber das macht keinen Sinn!!! Dann ist der linear-gradient funktionieren sollte... werde ich schauen, was SVG ist...
- Ich habe einen link gepostet, mit der Ihr CSS, importiert, Folgen Sie einfach es eng. Im Grunde IE6-8 verwendet, die funky filter, IE10+, sollte mit der normalen linear-gradient, mit Ausnahme einiger der ersten Versionen des IE10, die erfordern, dass -ms Präfix-version, wie Sie herausgefunden. IE9 ist eine wildcard, die Sie Abbrechen müssen Sie den filter heraus für IE9 nur, und verwenden eine spezielle SVG-Bild-hintergrund
- Sie sollten verwenden Sie die feature-Erkennung wie Modernizr, statt Bedingungs-tags und zusätzliche Klassen zu target-Browser, müssen Sie einen filter fallback.
- Ich mit modernizr selber viel, und es kommt in handliches. Aber deine Aussage, dass du "sollten" modernizr ist in Erster Linie Meinung, und wenn man in das Fleisch der Dinge, könnte sagen, dass CSS-abhängig von JS geht gegen die "separation of concerns". Im wesentlichen Modernizr ist ein Ansatz mit einer Liste wenn Pro 's und Con' s, nur als conditional-CSS-oder server-side browser sniffing hat eine Liste mit Pro und Kontra. Seine bis zu den einzelnen Entwickler, um zu erfahren, über die man und entscheiden, was Sie fühlen, ist am besten Ansatz, aber das ist nicht das, was SO ist hier für...
InformationsquelleAutor Lee
2

Diese funktionieren nicht im IE11
```
background-image: linear-gradient(top, #ff0000,#ffff00);
```
Dieser Arbeit und zeigen, wie dann die webkit-version
```
background-image: linear-gradient(180deg, #ff0000,#ffff00);
```
Webkit unterstützen auch die ...deg-Modus, aber nicht funktionieren wie der explorer, das ist der Gegenwert in webkit.
```
-webkit-linear-gradient(270deg, #ff0000,#ffff00);
```
Hinweis: Chrome verstehen, die keine webkit-version als explorer hat.

InformationsquelleAutor user3589298

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.