我正在编码一个网页,这是它在Firefox,Safari,Opera和Chrome中的外观。
删除了死的ImageShack链接
这是它在Internet Explorer中的外观(自言自语)
Internet Explorer的文本阴影在哪里?这真让我抓狂!如您所见,此页面有点依赖它看起来不错(更不用说标题图像也像IE上的废话一样)
例如,我尝试了此操作,但是它没有用。
这是代码:
<!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>
您可以在CSS中使用过滤器,如下所示:
filter:DropShadow(Color=#000000, OffX=1, OffY=1)
用法:
{FILTER: DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)}