IE9 coins arrondis & amp; Fond dégradé CSS Vivre ensemble?

Je suis tombé sur une chose bizarre dans IE9 essayer d'obtenir un dégradé d'arrière-plan à l'écran.

Fondamentalement, je suis d'appliquer plusieurs classes à un objet conteneur.

<div class="gradient corners"></div>

À l'aide de CSS.

.gradient {
background-color: #96A7C5;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, #6C86AD),
color-stop(0.6, #96A7C5)
);
background-image: -moz-linear-gradient(
center bottom,
#75A33A 19%,
#8DC447 60%
);

.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Pour obtenir le dégradé dans IE, j'applique le filtre à ordures à mon .gradient de classe.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');

Avec que, le gradient fonctionne, mais mon coins arrondis en aller.

J'ai donc essayé de les mettre dans une condition pour le filtre déclaration.

<!--[if IE]>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DC447', endColorstr='#75A33A');
<![endif]-->

Qui ramène mon coins, mais le gradient s'en va.

source d'informationauteur dv8withn8

  1. 25

    Gradient de sortir pour des coins arrondis dans IE9, donc la meilleure solution pour l'instant pour ajouter une div:

     <div class="corners"><div class="gradient"></div></div>

    et cacher débordement .coins

    .corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

overflow: hidden;
}

    Je recommande cet Photoshop-comme outil pour la création de la croix-navigateur dégradés: http://www.colorzilla.com/gradient-editor/

    Et celui-ci pour créer border-radius:
    http://border-radius.com/

  2. 2

    vous n'avez pas besoin de la if IE bloc.

    il suffit de mettre tous les 3(4 si vous comprennent à la fois S) des règles dans la déclaration de style, les navigateurs ne ramasser ceux qu'ils comprennent.

    un exemple:

    .gradient {
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1,#81a8cb)); /* Safari & Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

    Il convient également de noter que les gradients dans IE fonctionne uniquement si l'élément hasLayout (Voir: http://reference.sitepoint.com/css/haslayout)

  3. 2

    C'est une bonne solution de contournement pour la IE9 gradients vs coins question.
    Il utilise js pour générer une SVG à la volée - et c'est rapide.

    http://abouthalf.com/2011/10/04/updated-ie9-gradients-with-rounded-corners/

  4. 1

    coins arrondis et le filtre ne vont pas ensemble. pour IE, j'ai toujours inclure http://css3pie.com et de l'utiliser pour faire border-radius et dégradés dans IE. un exemple de css ressemble à ceci:

    .someElement {
    behavior: url(assets/js/PIE.htc);
    border-radius: 10px;
    background: #8cb2d1;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYjJkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzQwODBiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  #8cb2d1 0%, #4080b3 42%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cb2d1), color-stop(42%,#4080b3));
    background: -webkit-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: -o-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: -ms-linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    background: linear-gradient(top,  #8cb2d1 0%,#4080b3 42%);
    -pie-background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%);
}

    Les étapes:

    1. inclure la TARTE.htc via comportement
    2. ajouter rayon des frontières comme à l'habitude (border-radius: 10px;)
    3. ajouter la spéciale-pie-attribut background: (-pie-background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%);)
  5. 1

    Il suffit d'utiliser un wrapper div (arrondi & overflow hidden) à clip le rayon pour IE9. Simple, les œuvres de la croix-navigateur. SVG ou JS sont inutiles.

    <div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */
}