gradiente lineare utilizzando CSS3 PIE in IE9 non funziona, IE8 fa

Question

Ho deciso di eliminare completamente il supporto per IE6 e IE7 nel mio sito Web, reindirizzando gli utenti a una pagina di avviso di solo testo. Tuttavia continuo a supportare IE8 e IE9.

Mi sto realizzando utilizzando CSS3 PIE e il raggio di confine funziona in entrambi (IE8/9), box-shadow funziona in entrambi, tuttavia mi affido anche al gradiente lineare. Ho un sacco di etichette in uso per raggiungere questo obiettivo:

background: #E6E6E6; /* fallback */ 
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */ 
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); /* new webkit */ 
background: -moz-linear-gradient(#E6E6E6, #B3BCC7); /* firefox */ 
background: -ms-linear-gradient(#E6E6E6, #B3BCC7); /* meant to be IE... */ 
background: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); /* also meant to be IE... */ 
background: -o-linear-gradient(#E6E6E6, #B3BCC7); /* opera */ 
background: linear-gradient(#E6E6E6, #B3BCC7); /* W3C standard */ 
-pie-background: linear-gradient(#E6E6E6, #B3BCC7); /* PIE */ 

behavior: url(/PIE.htc); /* load PIE.htc */ 

lineare gradiente funziona in IE8, ma non IE9, stranamente. Ho provato qualsiasi soluzione che ho trovato, ma non hanno funzionato. IE8 mostra solo il fallback: in background: # E6E6E6; - non un gradiente.

Io non credo che sia qualcosa di sbagliato con il server o qualcosa di simile, perché le altre proprietà - border-radius e box-shadow - lavoro con PIE ma non senza.

Ho tutte le proprietà per lavorare in tutti i browser sostengo -? Proprio non IE9 :(

Tutte le idee
Grazie

Answer 1

OK, ecco la mia correzione. Certamente non è carino, ma funziona.

<style type="text/css"> 
body{ 
    background: #E6E6E6; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); 
    background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); 
    background: -moz-linear-gradient(#E6E6E6, #B3BCC7); 
    background: -ms-linear-gradient(#E6E6E6, #B3BCC7); 
    background: -o-linear-gradient(#E6E6E6, #B3BCC7); 
    background: linear-gradient(#E6E6E6, #B3BCC7); 
    -pie-background: linear-gradient(#E6E6E6, #B3BCC7); 

    behavior: url(/PIE.htc); 
} 
</style> 

<!--[if IE 9]><style>body{ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); behavior: url(/ie9-gradient-fix.htc); } </style><![endif]--> 

EDIT: Se qualcuno li vuole, PIE.htc si trova in http://www.css3pie.com e ie9-gradient-fix.htc si trova in http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip. Non riuscivo a far funzionare ie9-gradient-fix.htc a meno che non fosse nella directory root, PIE.htc funzionava nella mia directory/resources /.

Answer 2

Io non credo che sia qualcosa di sbagliato con il server o qualcosa di simile, perché le altre proprietà - border-radius e box-shadow - lavoro con PIE ma non senza

PIE non rende border-radius e box-shadow in IE9 dal IE9 sup. porti entrambi quelli nativamente. Quindi la loro presenza non indica che la PIE funzioni.

La mia ipotesi è che in realtà il tuo PIE.htc viene servito con l'intestazione del tipo di contenuto errato - IE9 è particolarmente severo riguardo al tipo di contenuto. Vedi http://css3pie.com/documentation/known-issues/#content-type per i dettagli.

Answer 3

Grande! ho usato PIE.php e corretto questo bug (linear-gradient + border-radius) in IE8, IE9!

Per utilizzarlo, è sufficiente assicurarsi che sia PIE.php e PIE.htc sono nella stessa directory, e quindi nel punto di CSS il comportamento al file PHP invece:

comportamento: url (PIE .php);

Answer 4

ie9-gradient-fix.htc ha funzionato per me in I.E. 9 ma poi di nuovo cambiare comportamento da pie.htc a pie.php ANCHE fa la stessa cosa.

Le ruote girano oh così lentamente a Microsoft ma sembra che potrebbero girare anche in direzioni opposte?

Answer 5

Avevo un grosso mal di testa perché anche con l'intestazione content-type corretta (testo/componente-x), il gradiente lineare non funzionava su IE9.

L'aggiornamento a PIE 2.0 ha risolto il problema.

http://css3pie.com/2013/01/28/pie-2-0-beta-1-released

Answer 6

Nel mio caso stavo usando <!--[if lt IE 9]>, cambiandolo in <!--[if lt IE 10]> fisso il mio problema (di non actualy compreso il mio file css IE).

Penso che ** <!--[if lte IE 9]> farebbe la stessa logica.

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#88222222', EndColorStr='#00222222', GradientType=0); 

PS. Non sto usando css3pie (pensavo di essere, derp)