Problema di rendering dei pulsanti CSS su Internet Explorer utilizzando il gradiente del filtro CSS

Per qualche motivo, solo la metà superiore di un pulsante viene visualizzata in Internet Explorer. Il pulsante si presenta bene in Firefox, Chrome e Safari.

Stiamo usando “filter: progid: DXImageTransform” per applicare un gradiente CSS al pulsante con CSS.

Ecco il sito: http://www.tekiki.com . (C’è solo un pulsante sulla pagina in questo momento.)

Qualche indizio?

Un paio di cose:

1) Consiglierei di provare CSS3PIE , ti permette di usare i gradienti ecc. E avrai risolto molti problemi che potresti dover affrontare.

2) IE9 non ha il supporto per i filtri, quindi se vuoi che funzioni ci sarà bisogno di usare un’immagine, o un datauri di un’immagine SVG come questa:

 background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%20%20%20%20%20%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22grad%22%20x1%3D%220%22%20y1%3D%2250%25%22%20x2%3D%220%22%20y2%3D%22100%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ff0000%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000000%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Aurl%28%23grad%29%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A"); 

Questo è reso da urlencoding di uno svg che assomiglia a questo:

 < ?xml version="1.0" encoding="utf-8"?>          

Questo ha il vantaggio di lavorare anche in Opera.

Questo significa che dovresti fare il grad normale, poi quello, poi il filtro per coprire i browser moderni, IE9, Opera e IE8 e giù.

A questo punto, potresti decidere di scrivere uno script che generi un’immagine di un laureato come te: http://www.bradshawenterprises.com/blog/2010/dynamically-drawing-gradients-with-php/