shadows looking bad in IE 9

looking in i开发者_StackOverflownternet how put a shadows to my containers i found this code that i apply to my divs

.boxShadow {
   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
}

Now, this code make's that my divs look great in chrome and Firefox

But for some reason this is how looks like in IE 9

I know that the style it's different for chrome and FF against IE but i want to know why my style are adding shadow to the characters too, is there a way to solve this?? thanks for your help

Replace your rule with this:

.boxShadow {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

To support IE 6, 7, and 8, then add a conditional CSS containing this rule:

.boxShadow {
  behavior: url(ie-css3.htc);
}

Download ie-css3.htc from http://box-shadow.googlecode.com/files/ie-css3.htc.