CSS3 box-shadow blur in IE9

Question

Has anyone else noticed that IE9's "standard" implementation of CSS box-shadow differs from other browsers? Whenever I use box-shadow and set a blur value, IE9 seems to render the blur at about half the value that Firefox, Safari, Chrome, and Opera do.

Is there any way around this? And what exactly is the point of IE9 supporting box-shadow as a standard property if it doesn't look the same as box-shadow in all the other browsers?

(Technically, Safari 5 still only supports -webkit-box-shadow and not the standard box-shadow property, but it also happens to render identically to box-shadow in Firefox 4, Chrome 11, and Opera 11. IE9 is the odd man out, despite supporting the same standard box-shadow syntax).

Answer 1

Are you using the right syntax?

-webkit-box-shadow: 2px 2px 16px #2b2b2b;
-moz-box-shadow: 2px 2px 16px #2b2b2b;
box-shadow: 2px 2px 16px #2b2b2b;

Answer 2

ie10 has the same problem. To target both ie9 and ie10 you can use this css hack. No need for contitional comments. (A CSS only solution)

.yourclass {
  -moz-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
  -webkit-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
  -o-box-shadow: 0px 0px 11px rgba(0, 0, 0, .7);
  box-shadow: 0px 0px 11px rgba(0, 0, 0, .7); 
}
@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
 .yourclass {
   box-shadow: 0px 0px 18px rgba(0, 0, 0, .7); 
 }
}

(Play around with the ie values)