Affichage du dégradé dans IE

Nous avons des problèmes pour afficher correctement les dégradés dans IE. Le code HTML suivant affiche bien le dégradé dans Chrome et d'autres navigateurs, mais s'affiche presque en bleu dans IE. Apprécierait l'aide!Affichage du dégradé dans IE

<HTML> 
    <HEAD> 
     <STYLE type="text/css"> 
      body { 
       /* Old browsers */ 
       background: #1e5799; 
       /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
       background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI0JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcyJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
       /* FF3.6+ */ 
       background: -moz-linear-gradient(top, #1e5799 0%, #ffffff 24%, #ffffff 72%, #7db9e8 100%); 
       /* Chrome,Safari4+ */ 
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(24%,#ffffff), color-stop(72%,#ffffff), color-stop(100%,#7db9e8)); 
       /* Chrome10+,Safari5.1+ */ 
       background: -webkit-linear-gradient(top, #1e5799 0%,#ffffff 24%,#ffffff 72%,#7db9e8 100%); 
       /* Opera 11.10+ */ 
       background: -o-linear-gradient(top, #1e5799 0%,#ffffff 24%,#ffffff 72%,#7db9e8 100%); 
       /* IE10+ */ 
       background: -ms-linear-gradient(top, #1e5799 0%,#ffffff 24%,#ffffff 72%,#7db9e8 100%); 
       /* W3C */ 
       background: linear-gradient(top, #1e5799 0%,#ffffff 24%,#ffffff 72%,#7db9e8 100%); 
       /* IE6-8 */ 
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); 
      } 
     </style> 
    </HEAD> 
<BODY> 
    <H1 >Testing Blue Gradient</H1> 
</BODY> 
</HTML>

Source

2011-11-09 user1478147

Essayez ceci:

body { 
    background-color: #1e5799; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1e5799), to(#7db9e8)); 
    background-image: -webkit-linear-gradient(top, #1e5799, #7db9e8); 
    background-image: -moz-linear-gradient(top, #1e5799, #7db9e8); 
    background-image:  -ms-linear-gradient(top, #1e5799, #7db9e8); 
    background-image:  -o-linear-gradient(top, #1e5799, #7db9e8); 
    background-image:   linear-gradient(top, #1e5799, #7db9e8); 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#1e5799', EndColorStr='#7db9e8'); 
}

Je l'ai testé dans IE 6-9 - fonctionne très bien.

CSS3 Please

Source

2011-11-09 20:26:30

Juste un mot pour dire la syntaxe MS est maintenant incorrecte. La version finale d'IE10 utilise la dernière syntaxe pour les dégradés CSS et ne nécessite pas de préfixe. La version préfixée ms doit être supprimée et la version W3C doit être mise à jour pour: arrière-plan: linéaire-gradient (vers le bas, # 1e5799, # 7db9e8); Notez le "en bas" plutôt qu'en haut. Les instructions ont retourné dans la dernière syntaxe, et nécessitent le mot-clé to qui le précède. –

@zoltan a une excellente réponse sur la façon de faire css. Une autre approche au lieu d'utiliser des filtres serait d'utiliser http://css3pie.com/. En plus des dégradés, il ajoute également des coins arrondis et des ombres en boîte. De plus, il vous permettra de faire tous les trois sur le même élément.

behavior: url(/PIE.htc);

Source

2011-11-10 09:51:56

Utilisez ce pour IE:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); 
/* for IE */

Source

2012-05-08 05:56:57 cgvector

Affichage du dégradé dans IE

Répondre

Questions connexes