Text-shadow: Ie8

Alright, so I'm trying to implement text-shadow across various browsers. I have IE6, IE7, FF, Chrome, and Opera all working... but IE8 wont' show any shadows unless it is in 'Compa

Solution 1:

I tried Modernizer (also with heygrady's polyfill). I tried cssSandpaper. I tried CSS3PIE. But none of them displayed me a text-shadow in Internet Explorer 8 (CSS3PIE doesn't feature text-shadow). I also tried the double-markup method. But that really can't be it.

And then I found Whykiki's blog post and simply added filter: dropshadow(color=#000000, offx=2, offy=2); in combination with display: block;. And that's it. Some of you might try zoom: 1; instead of display: block; to activate it. filter: glow(color=#000000,strength=2); works, too. As you will see, the MS dropshadow doesn't come with blur. I can live with that.

h1 {
  color: #fce934;
  text-shadow: 2px2px2px#000000;
  -moz-text-shadow: 2px2px2px#000000;
  -webkit-text-shadow: 2px2px2px#000000;
  filter: dropshadow(color=#000000, offx=2, offy=2);
  display: block; /* that's the important part */
}

Solution 2:

A website must not necessarily look the same in every browser. Plus MS filters are crap. I would recommend to use Modernizer an apply a different solution for IE8.

It will save you from headaches :)