Getting weird layout for Sencha project while running on Windows 8.1

Question

I have a sencha project is perfectly running on Android, on browser like Google Chrome but when I am trying to run the same project on Windows 8.1 or Internet Explorer the css styles are not rendering and the UI looks weird.

Below are the code snippets:

.button-grey {
    color:white !important;
    background-color:transparent !important;
    background-image: -webkit-linear-gradient(top,#c3c3c4,#e1e1e2) !important;
}  

The line -webkit-linear-gradient(top,#c3c3c4,#e1e1e2) is causing the problem. I am suspecting this because I am not sure whether Windows 8.1 or IE supports webkit.

Answer 1

Correct, IE does not support the -wekbkit prefixed CSS properties. You'll need to find the appropriate alternative for IE. Of course, it also depends on which version of IE you're trying to support. <=IE8 don't support CSS3 gradients, so you may have to create a background image for that case.