Pourquoi n'est pas mon div dégradé d'arrière-plan de travail dans IE9

j'ai été me casser la tête sur la façon d'obtenir un arrière-plan pour un DIV pour le travail à l'aide de l'arrière-plan dégradé pour IE9. La chose drôle est, le reste de la DIV d'affichage des gradients à l'exception de celui-ci.

Le code que j'utilise est:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA')

Pour obtenir une meilleure compréhension, j'ai créé une div de classe appelé classement, qui se trouve sur le côté en haut à droite de l'écran, la position est fixe.

Le reste des éléments dans la page ayant des gradients sont rendus correctement sauf cela. Suis-je en train de faire quelque chose de mal?

MODIFIER

C'est comment mon #répondre ressemble (qui fonctionne très bien)

#respond {
    -moz-box-shadow: 0 0 1px #CCCCCC;
    -webkit-box-shadow: 0 0 1px #CCCCCC;
    border-top: 1px solid #ECEDE8;
    float: left;
    margin-left: 10px;
    width: 370px;
    margin-bottom: 15px;
    background: -moz-linear-gradient(center bottom , #E8E8E8 0%, #F2F2F1 50%) repeat scroll 0 0 #F5F5F4;
    background: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#f2F2F1)); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F2F2F1'); /* for IE */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8', endColorstr='#F2F2F1'); /* for IE */

}

C'est de cette façon la .classement ressemble

.leaderboard {
    border: 1px solid #5D9ABA;
    -moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    margin: 375px auto;
    background: -moz-linear-gradient(center bottom , #388EBB 0%, #5D9ABA 50%) repeat scroll 0 0 #5D9ABA;
    background: -webkit-gradient(linear, left top, left bottom, from(#388EBB), to(#5D9ABA));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
    text-color: #EFEFEF;
    -moz-box-shadow: -2px 2px 5px 0px #CCCCCC;
    -webkit-box-shadow: -2px 2px 5px 0px #CCCCCC;
    box-shadow: -2px 2px 5px 0px #CCCCCC;
}

Vous pouvez trouver ce lien plus récent: webdesignerwall.com/tutorials/cross-browser-css-gradient. Toutefois, il semble en dehors de la gradienttype attribut, votre syntaxe est identique. Il y a peut être une erreur ou une contradiction ailleurs dans votre code?
Je viens de mettre à jour ma question d'origine avec le code css pour les deux.. La #répondre rend bien, mais la .classement n'est pas
Alors j'ai trouvé comment résoudre le problème.
Si vous avez trouvé le correctif, c'est une bonne idée pour répondre à votre question et de l'accepter, afin que d'autres puissent savoir ce qui a fonctionné pour vous.

OriginalL'auteur Sledge81 | 2011-05-05

css3 internet-explorer-9

Cela fonctionne (note mes observations à la croix-prise en charge du navigateur!):

HTML

<a class="gradient border-radius multiple-background" href="#">Anchor</a>
<div class="gradient border-radius multiple-background">Div</div>

CSS

a {
display:inline-block; /* NB ie7 ele requires display:block or display:inline-block for gradient to work on anchors */
}

a,
div {
min-height:1%; /* NB ie7 ele requires haslayout for gradient to work */
}

.gradient{
background: #f8cbd6; /* Old browsers */
background: -moz-linear-gradient(top, #f8cbd6 0%, #edeeec 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8cbd6), color-stop(100%,#edeeec)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* Opera11.10+ */
/* background: -ms-linear-gradient(top, #f8cbd6 0%,#edeeec 100%); IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8cbd6', endColorstr='#edeeec',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f8cbd6 0%,#edeeec 100%); /* W3C */
}
/* NOSUPPORT ie7-9 for gradient AND border-radius (border-radius only supported in ie9 anyway) */

PS: si vous êtes visant à combiner border-radius, les dégradés, et plusieurs arrière-plan des images (dans les dernières versions du 03/08/2011) dans IE7-9 bonne chance, c'est tout ce que je peux dire (juste passé 5hrs l'expérimentation et la documentation des cas d'utilisation!).

Je suis sur le point de publier mes résultats - qui sont en dehors de la portée de cette question - mais si quelqu'un à la lecture de ce besoin envoyez-moi un DM/e-mail ([email protected]).

Mieux,

Votre P. S. pas de support pour les dégradé et border-radius dans IE7-9 a été un grand front slapper pour moi. Bon dieu je suis malade de développement pour IE!!!
C'est la seule solution qui a fonctionné pour moi. Merci beaucoup!

OriginalL'auteur

5

Avez-vous essayé:
```
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA')"; /* for IE */
```
Les guillemets sont nécessaires. Aussi pour que les choses fonctionne dans toutes les versions d'IE, vous avez besoin de mettre la -ms-filter avant la filter.

Cela fonctionne pour moi dans IE9: Mode Document: IE8, mais pas en mode IE9...des idées pourquoi?
IE9 supprime la -ms- préfixe, je crois.
Comme je l'ai dit, pour que les choses marchent dans toutes les versions de IE, vous devez mettre l'-ms-filtre avant de le filtrer.

OriginalL'auteur robertc
2

IE utilise #AARRGGBB format 8 chiffres. Les couleurs qu'il a utilisé sont que 6 chiffres.
```
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#388EBB', endColorstr='#5D9ABA'); /* for IE */
```
ref:

http://msdn.microsoft.com/en-us/library/ms532930%28v=vs.85%29.aspx

Tu veux dire celles qu'il a utilisées étaient de 6 et que le document par microsoft dit qu'ils devraient être 8. Bon bien que!
Oui désolé, il semblerait que le comte n'est pas mon point fort. Édité pour la rendre correcte, Merci pour le heads up.

OriginalL'auteur curriegrr

Vous devez vous connecter pour publier un commentaire.