Forcing IE9 to render as IE8, but still using CSS3 properties

I'm using <meta http-equiv="X-UA-Compatible" content="IE=8"> to make IE9 render as IE8. This has fixed a lot of my issues, however because IE8 doesn't have support for bo开发者_运维技巧x-shadow I was forced to use filter: progid:DXImageTransform.Microsoft.Shadow(color='#333333', Direction=145, Strength=5); to get a similar effect to my shadow. Now, IE9 does have support for box-shadow however i can't get IE9 to use box-shadow instead of the filter.

Does anyone know how to get IE9 to render the shadow?

You can't make IE9 use its native box-shadow if it's in IE8 mode.

You can:

• Just use IE9 mode and fix your page to work in it - this is what I'd do.
• Use CSS3 PIE - it can simulate box-shadow in IE6-8.

Why are you forcing it to render as IE8 then expecting it to render as IE9? :) IE8 didn't have box-shadow support, so IE9 dutifully disables it when it's rendering as IE8.

If you want IE9 to render the box-shadow you'll have to set it back to rendering as IE9 or EDGE. If you are forced to maintain the x-ua-compatible as it is, then you'll have to use filters.

Note there's different syntax for IE8...

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

(example grabbed from http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/)

Because these are pretty nasty ideally I'd suggest you isolate them in an IE-only stylesheet delivered with conditional comments.