Internet Explorer中的文字阴影？

时间：2010-11-17 14:39:06

标签： css internet-explorer css3

我正在编写一个网页，以及它在Firefox，Safari，Opera和Chrome中的外观。

删除了死亡的ImageShack链接

以下是它在Internet Explorer中的表现（支撑你自己）

删除了死亡的ImageShack链接

Internet Explorer的Text-shadow在哪里？这真让我抓狂！正如你所看到的，这个页面有点依赖于它看起来不错（更不用说标题图像看起来像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'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>

4 个答案:

答案 0 :(得分：36)

您可以在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在非透明区域内创建阴影，阴影方向反转。对于透明物体，反之亦然。

Source

Demo

答案 1 :(得分：14)

滤镜产生的阴影：投影效果不佳。

当我需要一个好看的阴影时，我使用另一个位置为绝对的元素：

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

答案 2 :(得分：5)

IE不使用text-shadow属性。您可以选择使用过滤器作为节目here。

答案 3 :(得分：2)

IE确实使用了文本阴影，至少从IE 10开始。你必须设置所有三个距离，（注意第三个值有“px”，其中提问者没有px，我没有测试但是，看看是否重要：

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

我还建议使用此元标记：

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

似乎在IE 9和之前的版本中不起作用。也许提问者在IE9中工作。

相关问题
最新问题