Sombra de texto en Internet Explorer?

Estoy codificando una página web y así es como se ve en Firefox, Safari, Opera y Chrome.Sombra de texto en Internet Explorer?

enlace eliminado ImageShack muertos

y aquí es cómo se ve en Internet Explorer (prepárense)

enlace eliminado ImageShack muertos

¿Dónde está la sombra de texto para Internet Explorer ? ¡Esto me está volviendo loca! Como puede ver, esta página se basa en que se vea bien (sin mencionar que la imagen del encabezado también parece basura en IE)

Por ejemplo, probé esto (http://pastebin.ca/1994660) y no funcionó.

Aquí está el código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 

    <title>Jacob's CTF Highscores</title> 
<!--[if IE]><style type="text/css"> 



</style> 
<![endif]--> 
<style> 
body { 
background: url("bg.png") #6d6d6d; 
background-repeat:repeat-x; 
filter: progid:DXImageTransform.Microsoft.DropShadow(
     offx=1, offy=1, color=#000000); 
} 
#title { 
    background: url("title.png"); 
    width:450px; 
    height:74px; 
} 
* {padding:0;margin:0;} 
#mainwrap { 
margin:0 auto; 
width:800px; 
} 
.whole { 
background: rgba(255, 255, 255, 0.5); 
border:4px solid rgba(201, 201, 201, 0.5); 
padding:5px; 
margin-bottom:10px; 
} 
.scores { 
width:77%; 
padding:0;margin:0; 
border:4px solid #5E5E5E; 
background:#c2c2c2; 
float:left; 
} 

.navigation { 
width:20%; 
padding:0;margin:0; 
border:4px solid #5E5E5E; 
float:left; 
margin-right:5px; 
} 
.navigation ul { 

list-style:none; 
margin:0; 
padding:0; 
background:#c2c2c2; 
} 

.navigation ul li { 
display:block; 
margin:0; 
padding:0; 
font-family:tahoma; 
} 
.mainlead { 
text-transform:uppercase; 
font-family:tahoma; 
text-align:center; 
color:#78CF46; 
font-weight:bold; 
text-shadow:1px 1px 0 #000; 
padding:5px; 
background:#A3A3A3; 
border-bottom:1px solid #5E5E5E; 
} 
#menutitle { 
text-align:center; 
color:#005D9C; 
font-weight:bold; 
text-shadow:1px 1px 0 #000; 
padding:5px; 
background:#A3A3A3; 
border-bottom:1px solid #5E5E5E; 
} 
.navigation ul li a { 
display:block; 
padding:5px; 
text-transform:uppercase; 
color:yellow; 
font-size:16px; 
text-align:left; 
font-weight:bold; 
text-shadow:1px 1px 0 #000; 
text-decoration:none; 
} 
.navigation ul li a:hover { 
color:#fff; 
background:#B0B0B0; 
} 
#boards { 
border-collapse:collapse; 
width:100%; 
font-family:tahoma; 
font-size:16px; 
text-align:left; 
font-weight:bold; 
text-shadow:1px 1px 0 #000; 
} 
#boards td { 
border-right:1px solid #5E5E5E; 
text-align:center; 
padding:5px; 
} 
#head { 
border:0px; 
color:#CC4949; 
} 
tr.thescores { 
border-top:1px solid #5E5E5E; 
color:#478FF5; 
} 
#first { 
color:#C2C20E; 
} 
#second { 
color:#9C9C9C; 
} 
#third { 
color:#CD7F32; 
} 
</style> 
</head> 

<body> 


<div id="mainwrap"> 
<div id="title"></div> 
<div class="whole"> 
<div class="navigation"> 

    <div class="navwrap"> 

<ul> 
<li id="menutitle"><div id="leaderboards">Leaderboards</div></li> 
<li><a title="How many points you have." class="current" href="?view=overall">Overall</a></li> 
<li><a title="How many captures you've made." href="?view=captures">Captures</a></li> 
<li><a title="Total kills by adding tags, explodes, and mines." href="?view=kills">Kills</a></li> 
<li><a title="How many tags you've made on your side." href="?view=tags">Tags</a></li> 
<li><a title="How many people you've blown up with TNT." href="?view=explodes">Explodes</a></li> 
<li><a title="How many people you've killed with your mines." href="?view=mines">Mines</a></li> 
</ul> 


     </div> 

</div> 

<div class="scores"> 
<div class='mainlead'>Overall Leaderboards</div> 

<table id="boards"> 
<tr id="head"><td>Rank</td><td>Username</td><td>Points</td><td style="width:80px;">Games</td> <td style="width:80px;">Avg. Won</td> </tr> 
<tr id="first" class="thescores"><td>1</td><td style="text-align:left">Guard</td><td>423</td><td>12</td><td>1.4%</td> </tr> 
<tr id="second" class="thescores"><td>2</td><td style="text-align:left">Jacob_</td><td>413</td><td>12</td><td>1.4%</td> </tr> 
<tr id="third" class="thescores"><td>3</td><td style="text-align:left">NoobRUS</td><td>407</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>4</td><td style="text-align:left">Aanum</td><td>351</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>5</td><td style="text-align:left">Pandora</td><td>320</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>6</td><td style="text-align:left">Minec</td><td>300</td><td>12</td><td>1.4%</td> </tr> 
<tr class="thescores"><td>7</td><td style="text-align:left">warptera</td><td>275</td><td>12</td><td>1.4%</td> </tr> 

</table> 
</div> 


<div style="clear:both;"></div></div> </div> 


</body> 
</html>

Fuente

2010-11-17 nn2

Si crees que tienes que hackear Ie para obtener sombras de texto funcionando (en lugar de alterar ligeramente tus colores) eche un vistazo a esto »http://www.fetchak.com/ie-css3/ –

Se puede usar un filtro en el CSS de este modo:

filter:DropShadow(Color=#000000, OffX=1, OffY=1)

Uso:

{FILTER: DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)}

color es el nombre o el valor RGB del color de la sombra.
OffX y OffY son el número de píxeles para compensar la sombra del objeto. Los enteros positivos mueven la sombra hacia la derecha o hacia abajo. Los enteros negativos mueven la imagen hacia la izquierda o hacia arriba.
Positivo se puede establecer en 1 o 0. Para objetos normales, Positivo = 1 crea una sombra paralela normal y Positivo = 0 crea una sombra dentro de la región no transparente con la dirección de la sombra invertida. Para objetos transparentes, lo contrario es cierto.

Source

Demo

Fuente

2010-11-17 14:43:44

¿Es correcto? ? – nn2

Sí, pero utilice el valor hexadecimal completa para el color o que conseguirá la pata, es decir: '# 000000' de negro –

Esto no está funcionando para mí! http://pastebin.ca/1994660 – nn2

IE no utiliza la propiedad text-shadow. Puede utilizar filtro alternativamente como muestra here.

Fuente

2010-11-17 14:42:29

sombras hechas por el filtro: DropShadow no se ven bien.

uso otro elemento con position: absolute cuando necesito una buena Loking sombra:

.sample {position:relative} 

.sample p{position:relative;z-index:2;text-shadow:1px 1px 3px #000;} 

.sample p.shadow{position:absolute;zoom:1;z-index:1; 
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1) 
    progid:DXImageTransform.Microsoft.Alpha(opacity=25) 
    progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)" 
    "progid:DXImageTransform.Microsoft.Alpha(opacity=25)" 
    "progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true')"; 
    color: #111111; 
    top:-2px; 
    left:-2px; 
} 

*|html .sample p.shadow{display:none} /*hidden in other browsers*/ 

<div class="sample"> 
<p>text</p> 
<p class="shadow">text</p> 
</div>

Fuente

2011-05-24 09:35:58 Feuerengel

Esto funciona perfecto cuando otros no lo hicieron. gracias por el html + CSS completo! –

Excelente solución. Hizo que la sombra pareciera un poco gruesa en los navegadores webkit, así que hice una .shadow {display: none} y luego agregué los estilos shadow dentro de una declaración condicional de IE y, por supuesto, display: block; – MadTurki

IE hace uso de sombra de texto, por lo menos desde IE 10. Hay que tener las tres distancias establecidas, (nótese el tercer valor tiene "px", en el que el interrogador no tenía el px, no he probado para ver si lo que importa, sin embargo):

.shadow{ 
    text-shadow: 1px 1px 0px #FFFFFF; 
}

también se recomienda tener esta etiqueta meta:

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

Parece que no funciona en IE 9 y anteriores. Quizás el interrogador estaba trabajando en IE9.

Fuente

2013-10-24 17:15:20 SeanKendle

Probablemente IE8, IE9 se lanzó en marzo de 2011. – phpscriptcoder

¡Cierto! Gracias. – SeanKendle

Sombra de texto en Internet Explorer?

Respuesta

Cuestiones relacionadas