text shadow in Internet Explorer 9?

Question

I have a div that has this property:

text-shadow:2px 2px 3px #252525;

It works great in Firefox 5, but Internet Explorer 9 does not show it. I thought IE 9 was supposed to support CSS3?

How can I get a similar result in IE then?

IE9 has the poorest support for CSS3 compared to any other browser. — Rob, Aug 01 '11 at 15:28
see: http://www.quirksmode.org/css/contents.html and the CSS3 declarations section. — tjcss, Aug 01 '11 at 16:11

score 8 · Accepted Answer · answered Aug 01 '11 at 15:26

8

IE9 does not understand text-shadow property. You can use filter property (IE only) instead:

text-shadow:2px 2px 3px #252525;

can be replaced with

filter: Shadow(Color=#252525, Direction=45, Strength=2);

The result must be similar.

answered Aug 01 '11 at 15:26

VIK

689
2
9
20

score 2 · Answer 2 · edited Jan 06 '17 at 11:27

Since this has been a pain in my side, I figured I'd post the most important thing left out EVERY time I see something about text shadows..

well.. 2 things.

.shadow {
   display: block; /* required for it to work.. */
   text-shadow: 0.1em 0.1em 0.1em gray;
   filter: Shadow(Color=gray, Direction=45, Strength=1);
}

Also, you might force IE compatibility mode using the next line in the section:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

I wish IE would get on board with the rest of the world. every single time I write something, IE always has troubles. What's worse, it works in every browser or device EXCEPT IE.

Something else that may be cool to know:

http://www.colorzilla.com/gradient-editor/

does color gradients with IE compatibility (check both boxes.) Works great.

Now, all we need is a great IE fix for curved corners that consistently works.

Enjoy.

wow the meta tag seems to be like black magic, was a pain to make things work on IE but with that single line everything works much better! — Jhonnatan Gonzalez Rodriguez, Apr 24 '13 at 16:54

text shadow in Internet Explorer 9?

2 Answers2