Text-Shadow: IE8

Question

Bien, entonces estoy tratando de implementar text-shadow en varios navegadores. Tengo IE6, IE7, FF, Chrome y Opera funcionando ... pero IE8 no mostrará sombras a menos que esté en 'Vista de compatibilidad'.

He visto varias "soluciones" a través de la búsqueda/Google, pero la sombra sigue apareciendo solo en "Vista de compatibilidad".

¿Alguna idea sobre cómo hacer que aparezca sin tener que cambiar de modo?

Nota: Uso de HTML5 Boilerplate y Modernizr.

editar: Agregué que estoy usando Modernizr, y hice clic en el botón incorrecto en mi probador. Esto tampoco funciona en IE9, pero no creo que esté relacionado.

CSS:

#links li a { 
font-size: 24px; 
text-shadow: 0 3px 3px #102530, 0 3px 3px #102530; 
/* For IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530')"; 
/* For IE 5.5 - 7 */ 
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530'); 
filter:DropShadow(Color=#102530, OffX=0, OffY=3); 
zoom: 1; 
} 

HTML

<ul id="links"> 
    <li><a href="#"/>Text</a></li> 
</ul> 

Answer 1

Un sitio web no debe ser necesariamente el mismo aspecto en todos los navegadores. Además, los filtros MS son basura. Yo recomendaría usar Modernizer y aplicar una solución diferente para IE8.

Se le ahorrará de dolores de cabeza :)

Answer 2

me trataron Modernizer (también con heygrady's polyfill). Intenté cssSandpaper. Intenté CSS3PIE. Pero ninguno de ellos me mostró una sombra de texto en Internet Explorer 8 (CSS3PIE no tiene text-shadow). También probé el double-markup method. Pero eso realmente no puede ser.

Y luego encontré Whykiki's blog post y simplemente agregué filter: dropshadow(color=#000000, offx=2, offy=2); en combinación con display: block;. Y eso es. Algunos de ustedes pueden probar zoom: 1; en lugar de display: block; para activarlo. filter: glow(color=#000000,strength=2); funciona, también. Como verá, MS dropshadow no viene con desenfoque. Puedo vivir con ello.

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