gradiente non viene arrotondato in IE9

Question

Ho creato un pulsante angolo arrotondato e IE9 il gradiente di sfondo non viene arrotondato:

Ecco il CSS:

.search button { 
    padding: 10px; 
    font-family: "OpenSansSemibold", "Helvetica", Arial, sans-serif; 
    font-size: 16px; 
    display: inline-block; 
    outline: none; 
    cursor: pointer; 
    text-align: center; 
    text-decoration: none; 
    padding: .5em 2em .55em; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em; 
    border-radius: .5em; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    color: #fef4e9; 
    border: solid 1px #da7c0c; 
    background: #f78d1d; 
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); 
    background: -moz-linear-gradient(top, #faa51a, #f47a20); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
} 

Come può Ho risolto questo?

Answer 1

Rimuovi lo stile dalla tua classe css.

JS Fiddle Example

Se si desidera che il gradiente per IE8 e di seguito, quindi è necessario creare un file CSS separato e avvolgerlo in questo:

<!--[if lte IE 8]> 
[css path here] 
<![endif]--> 

Non si può avere sia un gradiente e arrotondato pulsante d'angolo in IE9. In effetti, il framework Bootstrap di Twitter riduce i pulsanti IE9 a un colore di sfondo solido con un angolo arrotondato.

Answer 2

IE9 è un browser perfettamente funzionante; il problema sta usando i vecchi stili filter.

Non sono mai stati buoni, e sono stati lasciati in IE9 solo per motivi di supporto legacy. Ci sono un sacco di stranezze con loro, tra cui questo che è abbastanza noto.

Il tuo problema è che IE9 non supporta i gradienti CSS standard, quindi la domanda è cosa fare invece di filter se vuoi usarli?

Ci sono varie risposte, ma la migliore è CSS3Pie.

Questa è una piccola libreria javascript che consente di utilizzare gradienti CSS standard in IE9 (e tutte le altre versioni di IE da IE6 in poi). Aggiunge anche border-radius e box-shadow per le versioni di IE che non li supportano comunque.

Non è invadente, e non causa alcun sovraccarico in altri browser.

CSS3Pie utilizza il linguaggio di grafica vettoriale di IE, VML per renderizzare i suoi gradienti, quindi perché non è interessato dal bug filter.

Se si voleva davvero evitare l'uso di Javascript, sarebbe possibile creare un elemento VML o SVG con una sfumatura. Questo potrebbe essere fatto all'interno del tuo CSS usando un'immagine con codifica URI (esempio here). Ma molto più facile lasciare che CSS3Pie lo faccia per te.

Le uniche altre soluzioni disponibili sono il caricamento di un'immagine di sfondo vecchia scuola o semplicemente la fornitura di un colore di sfondo a tinta unita come opzione di fallback.

Probabilmente si dovrebbe fornire comunque il colore normale di riserva, ma per questo problema, i miei soldi sono su CSS3pie che è la soluzione migliore.

Spero che questo aiuti.