CSS Internet Explorer 中的文本阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4205478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 23:11:28 来源:igfitidea点击:
Text Shadow in Internet Explorer?
提问by test
I'm coding a webpage and here is how it looks in Firefox, Safari, Opera, and Chrome.
我正在编写一个网页，下面是它在 Firefox、Safari、Opera 和 Chrome 中的外观。
removed dead ImageShack link
删除了无效的 ImageShack 链接
and here is how it looks in Internet Explorer (brace yourselves)
这是它在 Internet Explorer 中的外观（请自备）
removed dead ImageShack link
删除了无效的 ImageShack 链接
Where is the Text-shadow for Internet Explorer? This is driving me crazy! As you can see, this page kinda relies on it to look good (Not to mention the header-image looks like crap on IE as well)
Internet Explorer 的 Text-shadow 在哪里？这真让我抓狂！正如你所看到的，这个页面有点依赖它看起来不错（更不用说标题图片在 IE 上看起来也很垃圾）
For example, I tried this (http://pastebin.ca/1994660) and it didn't work.
例如，我试过这个（http://pastebin.ca/1994660）但它没有用。
Here is the 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>
回答by Juan Cortés
You could use a filter in your css like so:
您可以在 css 中使用过滤器，如下所示：
filter:DropShadow(Color=#000000, OffX=1, OffY=1)
Usage:
用法：
{FILTER: DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)}
- Color is the name or RGB value of the color for the shadow.
- OffX and OffY are the number of pixels to offset the shadow from the object. Positive integers move the shadow to the right or down. Negative integers move the image to the left or up.
- Positive can be set to 1 or 0. For normal objects, Positive=1 creates a normal drop shadow and Positive=0 creates a shadow within the non-transparent region with the shadow direction reversed. For transparent objects, the reverse is true.
- 颜色是阴影颜色的名称或 RGB 值。
- OffX 和 OffY 是从对象偏移阴影的像素数。正整数将阴影向右或向下移动。负整数将图像向左或向上移动。
- Positive 可以设置为 1 或 0。对于普通对象，Positive=1 创建一个正常的投影，Positive=0 在非透明区域内创建一个阴影方向相反的阴影。对于透明对象，情况正好相反。
回答by Feuerengel
Shadows made by filter:DropShadow aren't looking good.
filter:DropShadow 制作的阴影看起来不太好。
I use another element with position:absolute when I need a good-loking shadow:
当我需要一个漂亮的阴影时，我使用另一个带有 position:absolute 的元素：
.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>
回答by Matthew Jones
回答by Sean Kendle
IE does use text-shadow, at least since IE 10. You have to have all three distances set, (note the third value has "px", where the questioner didn't have the px, I didn't test to see if that matters, though):
IE 确实使用 text-shadow，至少从 IE 10 开始。你必须设置所有三个距离，（注意第三个值有“px”，提问者没有 px，我没有测试看看是否不过这很重要）：
.shadow{
text-shadow: 1px 1px 0px #FFFFFF;
}
I also recommend having this meta tag:
我还建议使用此元标记：
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Doesn't seem to work in IE 9 and prior. Maybe the questioner was working in IE9.
似乎不适用于 IE 9 及更早版本。也许提问者在 IE9 中工作。
