css – 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'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,0.5);
border:4px solid rgba(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>

解决方法

你可以在你的CSS中使用一个过滤器：

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

用法：

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

>颜色是阴影颜色的名称或RGB值。
OffX和OffY是偏移对象的阴影像素数。正整数将阴影向右或向下移动。负整数将图像向左或向上移动。
> Positive可以设置为1或0.对于正常对象，Positive = 1会创建正常的阴影，Positive = 0会在阴影方向相反的非透明区域内创建阴影。对于透明对象，反之亦然。

Source

Demo

原文链接：https://www.f2er.com/css/218156.html

css – Internet Explorer中的文字阴影？

解决方法

猜你在找的CSS相关文章