Текстовая тень в Internet Explorer?

Я кодирую веб-страницу, и вот как это выглядит в Firefox, Safari, Opera и Chrome.

удалена мертвая ссылка ImageShack

и вот как он выглядит в Internet Explorer (привязывайтесь)

удалена мертвая ссылка ImageShack

Где текстовая тень для Internet Explorer? Это сводит меня с ума! Как вы можете видеть, эта страница похожа на то, что она хорошо выглядит (не говоря уже о том, что заголовочное изображение выглядит как дерьмо на IE)

Например, я пробовал это (http://pastebin.ca/1994660), и это не сработало.

Вот код:

<!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 CTF Highscores</title>  <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>

Ответы

Ответ 1

Вы можете использовать фильтр в своем CSS, например:

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

Использование:

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

Цвет - это имя или значение RGB для цвета для тени.
OffX и OffY - это число пикселей, которое компенсирует тень от объекта. Положительные целые числа перемещают тень вправо или вниз. Отрицательные целые числа перемещают изображение влево или вверх.
Положительный может быть установлен в 1 или 0. Для обычных объектов Positive = 1 создает обычную тень, а Positive = 0 создает тень в непрозрачной области с изменением направления тени. Для прозрачных объектов верно обратное.

Источник

Demo

Ответ 2

Тени, сделанные фильтром: DropShadow выглядят не очень хорошо.

Я использую другой элемент с положением: абсолютный, когда мне нужна теневая тень:

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

Ответ 3

IE не использует свойство text-shadow. Вы можете попеременно использовать фильтр, как показано здесь.

Ответ 4

IE использует текстовую тень, по крайней мере, с IE 10. У вас должны быть установлены все три расстояния (обратите внимание, что третье значение имеет "px", где у опроса не было px, я не тестировал если это имеет значение, то):

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

Я также рекомендую иметь этот метатег:

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

Кажется, не работает в IE 9 и ранее. Может быть, вопросник работал в IE9.