Ombre de texte dans Internet Explorer?

Je suis en train de coder une page Web et voici à quoi elle ressemble dans Firefox, Safari, Opera et Chrome.Ombre de texte dans Internet Explorer?

enlevé lien ImageShack mort

et voici à quoi il ressemble dans Internet Explorer (tenez-vous bien)

lien ImageShack mort enlevé

Où se trouve le texte-ombre pour Internet Explorer ? Ça me rend fou! Comme vous pouvez le voir, cette page se base sur elle pour être belle (sans oublier que l'image en-tête ressemble à crap sur IE)

Par exemple, j'ai essayé ceci (http://pastebin.ca/1994660) et cela n'a pas fonctionné.

Voici le code:

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

Source

2010-11-17 nn2

Si vous vous sentez absolument obligé de pirater Ie pour faire fonctionner les ombres de texte (au lieu de modifier légèrement vos couleurs), jetez un coup d'oeil à ceci »http://www.fetchak.com/ie-css3/ –

Vous pouvez utiliser un filtre dans votre css comme ceci:

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

Utilisation:

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

couleur est le nom ou la valeur RVB de la couleur pour l'ombre. OffX et OffY sont le nombre de pixels pour décaler l'ombre de l'objet.
Les entiers positifs déplacent l'ombre vers la droite ou vers le bas. Les entiers négatifs déplacent l'image vers la gauche ou vers le haut.
Positive peut être définie sur 1 ou 0. Pour les objets normaux, Positive = 1 crée une ombre portée normale et Positive = 0 crée une ombre dans la zone non transparente avec la direction de l'ombre inversée. Pour les objets transparents, l'inverse est vrai.

Source

Demo

Source

2010-11-17 14:43:44

Est-ce vrai? ? – nn2

Eh oui, mais utiliser la pleine valeur hexadécimale pour la couleur ou il se foiré, à savoir: '# 000000' pour le noir –

Ce ne fonctionne pas pour moi! http://pastebin.ca/1994660 – nn2

IE n'utilise pas la propriété text-shadow. Vous pouvez alternativement utiliser le filtre comme le montre here.

Source

2010-11-17 14:42:29

Ombres faites par le filtre: DropShadow ne sont pas en bon état.

j'utiliser un autre élément avec position: absolute quand je besoin d'une ombre bonne loking:

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

Source

2011-05-24 09:35:58 Feuerengel

Cela fonctionne parfaitement lorsque les autres ne l'ont pas fait. merci pour le html + CSS complet! –

Excellente solution. Il a fait paraître l'ombre un peu chunky dans les navigateurs webkit donc j'ai fait un .shadow {display: none} et puis ajouté les styles d'ombre dans une instruction IE conditionnelle et bien sûr afficher: block; – MadTurki

IE n'utilise text-shadow, au moins depuis IE 10. Vous devez avoir tous ensemble trois distances, (note la troisième valeur a « px », où le questionneur n'a pas eu la px, je ne l'ai pas tester pour voir si ce qui compte, cependant):

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

Je recommande aussi avoir cette balise meta:

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

Ne semble pas fonctionner dans IE 9 et avant. Peut-être que le questionneur travaillait dans IE9.

Source

2013-10-24 17:15:20 SeanKendle

Probablement IE8, IE9 a été libéré en mars 2011. – phpscriptcoder

Assez vrai! Merci. – SeanKendle

Ombre de texte dans Internet Explorer?

Répondre

Questions connexes