IE css problème de fond

Question

Est-ce que ce qui suit est correct puisque IE ne supporte pas "liner-gradient"?

background: #f5f7f9; /* Old browsers */ 
    background: -moz-linear-gradient(top, #f5f7f9 0%, #cdcdcd 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7f9), color-stop(100%,#cdcdcd)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f5f7f9 0%,#cdcdcd 100%); /* W3C */ 
    background:url(../img/backgrounds/form_bg.png) 0 0 no-repeat; 

Je propose fondamentalement un repli d'image.

Ce ne fonctionne pas dans IE9 et au-dessous

Answer 1

D'abord, mettez votre premier fallback dans la cascade. Exemple:

 
body { 
    background: url(http://placekitten.com/500/500) top center #cdcdcd no-repeat; 
    background: -moz-linear-gradient(top, #f5f7f9 0%, #cdcdcd 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f7f9), color-stop(100%,#cdcdcd)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #f5f7f9 0%,#cdcdcd 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #f5f7f9 0%,#cdcdcd 100%); /* W3C */ 
} 

Les navigateurs modernes considèrent le dégradé comme une sorte d'image de fond. Avec la solution de repli en premier, les navigateurs qui peuvent comprendre le repli l'utiliseront, et les navigateurs qui peuvent comprendre les autres spécifications remplaceront le repli avec les dégradés. Par exemple, IE7 ne comprendra que l'image d'arrière-plan et ignorera les dégradés. Chrome fera l'image d'arrière-plan, puis remplacera l'image d'arrière-plan avec le linear-gradient.

Deuxièmement, le support -ms-linear-gradient commence dans IE10; il n'est pas pris en charge par IE9, c'est pourquoi cela ne fonctionne pas dans IE9 et ci-dessous.

Vous pouvez utiliser des filtres pour IE9 à 6. Exemple:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3838', endColorstr='#00ffffff',GradientType=0); /* IE6-9 */ 

Si vous utilisez un filtre, vous devrez également désactiver l'image de remplacement, puisque IE 6 - 9 ne remplacent pas les images de fond avec filtres Je préfère le faire avec conditional comments:

<!--[if (gte IE 6)&(lte IE 9)]> 
<style type="text/css"> 
body { background-image: none; } 
</style> 
<![endif]--> 

Notez que les commentaires conditionnels sont HTML. Enfin, la plupart des sites n'ont probablement pas besoin des préfixes -moz, -webkit ou -o; chacun d'eux a supported the standard linear-gradient for a while.