CSS3 text-shadow distorts/pixelates in all IE browsers (see screenshot pls)

Question

I just put text shadow on an element and it looks fine in all browsers except any IE.

See the black pixles around the text?

color: #68C3C7;
font-family: "Hoefler Text",Baskerville,"Big Caslon","Adobe Garamond Pro",Georgia,Palatino,"Times New Roman",serif;
font-size: 30px;
letter-spacing: 1.2px;
line-height: 30px;
padding: 20px 0 0;
text-align: center;    
text-shadow: 1px 1px 0px #999999;
filter: dropshadow(color=#999999, offx=1, offy=1);

Answer 1

You can use a combination of IE's chroma & drop shadow filter. Check this: http://www.useragentman.com/blog/2011/04/14/css3-text-shadow-can-it-be-done-in-ie-without-javascript/

Here's some example code:

color: #68C3C7;
font-family: "Hoefler Text",Baskerville,"Big Caslon","Adobe Garamond Pro",Georgia,Palatino,"Times New Roman",serif;
font-size: 30px;
letter-spacing: 1.2px;
line-height: 30px;
padding: 20px 0 0;
text-align: center;    
text-shadow: 1px 1px 0px #999999;
background-color: white;
filter: progid:DXImageTransform.Microsoft.Chroma(Color=white)
        progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#99999);

Answer 2

there is the possibility that you need an extra argument for ie8:

.shadow {
/* 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');

}