How to get rid of black artifacts on text when usi

Question

Image CSS below. I need a red color heading with a #f2f2f2 shadow. It look ok in Chrome and Firefox but in IE it show litte black artifacts on the edges of every letter. Is there a better way to make this shadow?

h1 {
  color: red;
  text-shadow: 3px 3px 0px #f2f2f2;  
  filter: progid:DXImageTransform.Microsoft.dropshadow(color=#f2f2f2, offX=3, offY=3);
}

Answer 1

Add a background color to the image:

.logo-images-panel img {
    margin-left: 20px;
    // added..
    background-color: #FFF;
}

Answer 2

You could use a rule like this for IE9

h1 {
  color: red;
  background-color: #cccccc;
  text-shadow: 3px 3px 0px #f2f2f2;  
  filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
          progid:DXImageTransform.Microsoft.dropshadow(color=#f2f2f2, offX=3, offY=3);
}

Defining a background-color will prevent the black outline artifact from occurring, and including the DXImageTransform.Microsoft.Chroma as part of your filter will make anything in the element which has that color transparent. It is important to not choose a background-color which will match any content color, or this will be made transparent as well.

Source