Text Shadow dans Internet Explorer?

Je suis le codage d'une page web et voici à quoi il ressemble dans Firefox, Safari, Opera et Chrome.

retiré morts ImageShack lien

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

retiré morts ImageShack lien

Où est le Text-shadow pour Internet Explorer? Cela me rend fou! Comme vous pouvez le voir, cette page un peu s'appuie sur elle pour faire bonne (pour ne Pas mentionner l'en-tête d'image regarde comme de la merde sur IE)

Par exemple, j'ai essayé ce (http://pastebin.ca/1994660) et ça ne fonctionne pas.

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 d'informationauteur nn2

36

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 de l'ombre.
- OffX et OffY sont au nombre de pixels de décalage de l'ombre de l'objet. Les entiers positifs déplacer l'ombre vers la droite ou vers le bas. Les entiers négatifs déplacer l'image vers la gauche ou vers le haut.
- Positif peut être réglé à 1 ou à 0. Pour les objets normaux, Positif=1 crée une normale de l'ombre portée et Positif=0 crée une ombre à l'intérieur de l'absence de transparence de la région avec la direction de l'ombre inversée. Pour les objets transparents, l'inverse est vrai.
Source

Démo

Ombres faites par le filtre:DropShadow ne sont pas à la recherche de bonnes.

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

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

5

IE n'utilisez pas le texte-de l'ombre à la propriété. Vous pouvez alternativement utiliser un filtre comme le montre ici.
2

IE n'utiliser text-shadow, au moins depuis IE 10. Vous avez toutes les trois distances définir, (à noter que le tiers de la valeur a "px", où l'interlocuteur n'a pas le px, je n'ai pas fait de test pour voir si ce qui compte, tout de même):
```
.shadow{
text-shadow: 1px 1px 0px #FFFFFF;
}
```
Je recommande également d'avoir cette balise meta:
```
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
```
Ne semble pas fonctionner sous IE 9 et antérieures. Peut-être l'interlocuteur travaillait dans IE9.

Vous devez vous connecter pour publier un commentaire.