Text-Shadow:IE8

Question

好吧,所以我试图text-shadow在各种浏览器上实现.我有IE6,IE7,FF,Chrome和Opera都在工作......但IE8不会显示任何阴影,除非它在'兼容性视图'中.

我通过搜索/谷歌查看了一些"解决方案",但影子仍然只出现在"兼容性视图"中.

有关如何让它显示而不必更改模式的任何想法？

注意:使用HTML5 Boilerplate和Modernizr.

编辑:补充说我正在使用Modernizr,我点击了测试仪中的错误按钮.这在IE9中也不起作用,但我不认为它是相关的.

CSS:

#links li a {
font-size: 24px;
text-shadow: 0 3px 3px #102530, 0 3px 3px #102530;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#102530');
filter:DropShadow(Color=#102530, OffX=0, OffY=3);
zoom: 1;
}

HTML

<ul id="links">
    <li><a href="#"/>Text</a></li>
</ul>

Answer 1

我尝试过Modernizer(也有heygrady的polyfill).我试过cssSandpaper.我试过CSS3PIE.但是他们都没有在Internet Explorer 8中显示我的文本阴影(CSS3PIE没有功能text-shadow).我也尝试过双标记方法.但那真的不可能.

然后我找到了Whykiki的博客文章并简单地添加filter: dropshadow(color=#000000, offx=2, offy=2);了display: block;.就是这样.有些人可能会尝试zoom: 1;而不是display: block;激活它.filter: glow(color=#000000,strength=2);也有效.正如您将看到的,MS Drophadow并非模糊.我可以忍受这一点.

h1 {
  color: #fce934;
  text-shadow: 2px 2px 2px #000000;
  -moz-text-shadow: 2px 2px 2px #000000;
  -webkit-text-shadow: 2px 2px 2px #000000;
  filter: dropshadow(color=#000000, offx=2, offy=2);
  display: block; /* that's the important part */
}

Answer 2

网站不一定在每个浏览器中看起来都一样。另外 MS 过滤器很垃圾。我建议使用Modernizer并为 IE8 应用不同的解决方案。

它会让你免于头痛:)