Testo ombreggiato in Internet Explorer?

Sto codificando una pagina Web ed ecco come appare in Firefox, Safari, Opera e Chrome.Testo ombreggiato in Internet Explorer?

collegamento rimosso ImageShack morti

e qui è come appare in Internet Explorer (tenetevi forte)

collegamento rimosso ImageShack morti

Dov'è il text-shadow per Internet Explorer ? Questo mi sta facendo impazzire! Come potete vedere, questa pagina si basa su di esso per sembrare buono (per non parlare dell'intestazione-immagine sembra merda anche su IE)

Ad esempio, ho provato questo (http://pastebin.ca/1994660) e non ha funzionato.

Ecco il codice:

<!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>

fonte

2010-11-17 nn2

Se ritieni di dover assolutamente hackerare per far funzionare le ombre di testo (invece di alterare leggermente i tuoi colori) dai un'occhiata a questo »http://www.fetchak.com/ie-css3/ –

Si potrebbe utilizzare un filtro nel CSS in questo modo:

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

Usage:

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

colore è il nome o il valore RGB del colore per l'ombra.
OffX e OffY sono il numero di pixel per spostare l'ombra dall'oggetto. Gli interi positivi spostano l'ombra a destra o verso il basso. Gli interi negativi spostano l'immagine a sinistra o in alto.
Positivo può essere impostato su 1 o 0. Per oggetti normali, Positivo = 1 crea un'ombreggiatura normale e Positivo = 0 crea un'ombra all'interno della regione non trasparente con la direzione dell'ombra invertita. Per gli oggetti trasparenti, è vero il contrario.

Source

Demo

fonte

2010-11-17 14:43:44

È giusto? ? – nn2

Yup, ma utilizzare l'intero valore esadecimale per il colore o otterrà avvitato, vale a dire: '# 000000' per il nero –

Questo non funziona per me! http://pastebin.ca/1994660 – nn2

IE non usa la proprietà text-shadow. È possibile utilizzare alternativamente il filtro come mostrato here.

fonte

2010-11-17 14:42:29

ombre fatte da filtro: DropShadow non stanno andando bene.

Io uso un altro elemento con position: absolute, quando ho bisogno di un buon-loking ombra:

.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>

fonte

2011-05-24 09:35:58 Feuerengel

Funziona perfettamente quando altri no. grazie per l'html completo + CSS! –

Ottima soluzione. Ha reso l'ombra un po 'pesante nei browser Webkit, quindi ho fatto un .shadow {display: none} e poi ho aggiunto gli stili shadow all'interno di un'istruzione IE condizionale e ovviamente display: block; – MadTurki

IE fa uso di text-shadow, almeno da quando IE 10. Bisogna avere tutte e tre le distanze stabilite, (notare il terzo valore è "px", dove l'interrogante non ha avuto il px, non ho prova per vedere se quello che conta, però):

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

consiglio anche avere questo meta tag:

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

Non sembra funzionare in IE 9 e precedenti. Forse l'interrogante stava lavorando in IE9.

fonte

2013-10-24 17:15:20 SeanKendle

Probabilmente IE8, IE9 è stato rilasciato nel marzo 2011. – phpscriptcoder

Abbastanza vero! Grazie. – SeanKendle

Testo ombreggiato in Internet Explorer?

risposta

Problemi correlati