html - examples - box-shadow-color

Text-Shadow: IE8

Question

Muy bien, así que 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 analizado una serie de ''soluciones'' a través de la búsqueda / Google, pero la sombra solo aparece en ''Vista de compatibilidad''.

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

Nota: Usar 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 necesariamente debe tener el mismo aspecto en todos los navegadores. Además, los filtros MS son basura. Recomendaría usar Modernizer y aplicar una solución diferente para IE8.

Te salvará de dolores de cabeza :)

Answer 2

Intenté 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 método de doble marcado . Pero eso realmente no puede ser.

Y luego encontré la publicación de blog de Whykiki y simplemente agregué el filter: dropshadow(color=#000000, offx=2, offy=2); en combinación con display: block; . Y eso es. Algunos de ustedes pueden probar el zoom: 1; en lugar de display: block; para activarlo filter: glow(color=#000000,strength=2); funciona, también Como puede 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 */
}