html - css でテキストの影が正しく表示されない

Question

次の css を使用して、見出しにテキスト シャドウを適用しました。

h1, h2, h3, h4, h5, h6, p, span {

    text-shadow: 1px 1px 1px #999 !important; 


filter: progid:DXImageTransform.Microsoft.dropShadow(color=#999999,offX=1,offY=1);
}

h1{

 filter: Shadow(Color=#cccccc, Direction=130, Strength=1);}

HTML:

<h1>Contact Us</h1>

firefox では問題ないように見えますが、ie 8 と ie 9 では奇妙に見えます。下の画像を参照してください。

ファイアフォックス:

IE8:

これを修正する方法は？

Answer 1

これを使って：

h1, h2, h3, h4, h5, h6, p, span {
    text-shadow: 1px 1px 1px #999 !important; 
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#999999,offX=1,offY=1);
    background-color:#FFFFFF;
}

h1{
     filter: Shadow(Color=#cccccc, Direction=130, Strength=1);
}

Answer 2

別の答えを追加します。この投稿に感謝しますhttp://www.useragentman.com/blog/2011/04/14/css3-text-shadow-can-it-be-done-in-ie-without-javascript/

HTML：

<h1>
<span>Contact Us</span>
</h1>

CSS：

h1, h2, h3, h4, h5, h6, p, span {
    text-shadow: 1px 1px 1px #999 !important; 
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#999999,offX=1,offY=1);
    background-color:#FFFFFF;
}

h1{
    zoom: 1;
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(Color=white)
        progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#eeeeee);
    font-size:20px;
}

JSFIDDLE

Answer 3

このフィルタを試して、必要に応じて強度と方向を変更してください。

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=60, Color='#999999');