Following the directions in the Theming Guide to setup a simple project, IE9 ignores $base-color, $button-default-base-color, and probably others. I realize this might be an IE bug but still thought it was worth posting here.
Steps to reproduce the problem:
Create a new Ext JS project, add a simple panel & button
Follow the instructions in the Theming Guide to switch over to using SASS/Compass
Change $base-color & $button-default-base-color in your SCSS file
The result that was expected:
For the colors to be correct in all modern browsers
The result that occurs instead:
All browsers except IE9 display the correct color
See live test below
See this URL for live test case. Note that the panel header should be red, and the button should be blue:
For IE you also need to run the slicer tool to have the theme behave.
IE9 and less do not support linear-gradient, so that background on the panel needs to be an image. Similarly, only IE9 in strict mode supports border-radius, which means more images for the IE9 quirks and IE<=8.
Check out this part toward the end:
Supporting Legacy Browsers
In most cases when creating new UI's, you will want to include background gradients or rounded corners. Unfortunately legacy browsers do not support the corresponding CSS3 properties, so we must use images instead......
Thanks for taking the time to put together an example.
Twitter - @evantrimboli
Don't be afraid of the source code!
Thanks for your reply, Evan. I definitely saw that section towards the end of the Theming Guide, but I didn't think IE9 was considered to be a legacy browser since it's the most current version. May I politely suggest that you have someone update that page to be more specific about what constitutes a legacy browser?
Rhetorical side note: I often wonder how far along web development would be if we could recoup the hours lost to supporting any version of IE.