Couleurs de dégradé dans Internet Explorer

Regardez les filtres CSS personnalisés IE peut gérer http://msdn.microsoft.com/en-us/library/ms532847.aspx

Le code que j’utilise pour tous les dégradés de navigateur:

 background: #0A284B; background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887)); background: -webkit-linear-gradient(#0A284B, #135887); background: -moz-linear-gradient(top, #0A284B, #135887); background: -ms-linear-gradient(#0A284B, #135887); background: -o-linear-gradient(#0A284B, #135887); background: linear-gradient(#0A284B, #135887); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887'); zoom: 1; 

Vous devrez spécifier une hauteur ou un zoom: 1 pour appliquer hasLayout à l’élément pour que cela fonctionne dans IE.

Mettre à jour:

Voici une version LESS Mixin (CSS) pour tous les utilisateurs MOINS:

 .gradient(@start, @end) { background: mix(@start, @end, 50%); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")"; background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); background: -webkit-linear-gradient(@start, @end); background: -moz-linear-gradient(top, @start, @end); background: -ms-linear-gradient(@start, @end); background: -o-linear-gradient(@start, @end); background: linear-gradient(@start, @end); zoom: 1; } 

Le style de filter devrait fonctionner pour IE8 et IE9.

 .gradientClass { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC'); } 

En ce qui concerne les dégradés dans IE, un problème important est que vous pouvez utiliser les filtres de Microsoft …

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE'); zoom:1; 

… ils tuent les caractères clairs sur n’importe quel texte couvert par le dégradé. Étant donné que le but des dégradés est normalement de donner une meilleure apparence à l’interface utilisateur, c’est un point d’arrêt pour moi.

Donc, pour IE, j’utilise une image de fond répétitive à la place. Si l’image d’arrière-plan css est combinée au dégradé CSS pour les autres navigateurs (selon la réponse de Blowsie), les autres navigateurs ignoreront l’image d’arrière-plan en faveur du dégradé css, elle ne s’appliquera donc qu’à IE.

 background-image: url('/Content/Images/button-gradient.png'); 

Il existe de nombreux sites que vous pouvez utiliser pour générer rapidement un arrière-plan dégradé. Je l’utilise

Excellent outil de Microsoft, qui vous permet d’examiner les couleurs en temps réel et génère des CSS pour tous les navigateurs: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

 /* IE10 */ background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Opera */ background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); /* Proposed W3C Markup */ background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%); 

Je pensais juste append ce lien utile: http://css3please.com/

Montre comment faire fonctionner les dégradés dans tous les navigateurs.

Notez que IE10 prendra en charge les dégradés comme suit:

 background: -ms-linear-gradient(#017ac1, #00bcdf); 

À droite de l’ article de ScriptFX.com:

  
 Your page content goes in here ...... at the end of all the page content, you must close the 
 tag, immediately before the closing  tag.... as below 
  

Essaye ça:

 .red { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */ height: 0; /* gain layout IE5+ */ zoom: 1; /* gain layout IE7+ */ } 

Deux choses que j’ai découvertes en luttant avec IE 9 gradient.

1. Le -ms-filter n’a pas fonctionné pour moi. J’ai dû utiliser simplement le filter .
2. J’ai dû append de la height: 100% à ma classe pour qu’IE utilise le dégradé.