Linear-gradient ne fonctionne pas dans IE 11

J'ai une règle css qui fonctionne très bien dans chrome, firefox et l'habitude de travailler dans IE. Maintenant, mon apparemment valide css ne fonctionne pas.

.s-tour {
/*border-radius: 5px;*/
margin: 0 auto;
width: 250px;
height: 200px;
line-height: 100px;
font-weight: 600;
font-size: 18px;
box-shadow: 0 0 7px rgba(1, 1, 1, .8);
border: solid thin #555;
color: #E0E0E0;
background: #555;
background-image: linear-gradient(to bottom, #555 0%, #eee 100%);
background-image:-webkit-linear-gradient(top, #777, #666);
background-image: -ms-linear-gradient(top,#555555 0%,#666666 100%);
background-image:-o-linear-gradient(top, #777, #666);
background-image:-moz-linear-gradient(top, #777, #666);
}

Je me sens comme à la fois background-image: linear-gradient(to bottom, #555 0%, #eee 100%); ou -ms-background-image: linear-gradient(top,#555555 0%,#666666 100%); devrait être de travailler pour IE 11 encore la l'IE inspecteur met floue la ligne rouge en dessous et rien d'autre, j'essaie.

J'ai vérifié un travail de gradient sur une page de google et background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1); fonctionnait bien, mais même exact que la ligne ne fonctionne pas sur mon site.

J'ai essayé toutes les variantes que je peux penser en termes de propriété,les préfixes et les valeurs, y compris chaque réponse pertinente sur un débordement de pile et je suis maintenant perplexe, se demandant si c'est un DOM problème ou un bug ou quelque chose de simple.

vous pouvez utiliser ce site pour générer css gradient

OriginalL'auteur bruce | 2014-10-23

  1. 8

    essayez d'ajouter cette ligne à la fin de votre classe:

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#555555, endColorstr=#666666);
    Les travaux de cette. Im surpris, je pensais que c'était IE pré 10 syntaxe
    Je n'ai pu le faire fonctionner après joignant les couleurs dans une seule citation comme " filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#666666');` +1
    WOW! Cela a fonctionné, merci @xzegga!

    OriginalL'auteur xzegga

  2. 8

    Donc le problème que j'ai vraiment eu était que je n'étais pas à dire, c'est à dire le rendu de la page utilisant les dernières normes en matière de css.
    L'ajout de <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> à la <head> bloc de correction de la plupart de mes problèmes.

    OriginalL'auteur bruce

  3. 4

    Ce qui a fonctionné pour moi dans IE11 est pour utiliser correctement le CSS3 linear-gradient de propriété (http://www.w3schools.com/css/css3_gradients.asp)

    Un exemple:

    background: linear-gradient(to bottom, #FFF 0%, #EEE 100%);

    Après que je n'ai pas besoin d'utiliser des balises méta ou ancienne syntaxe du filtre.

    OriginalL'auteur eMike Wallace