html - 文字阴影 : IE8

Question

好吧，我正尝试在各种浏览器中实现 text-shadow。我的 IE6、IE7、FF、Chrome 和 Opera 都可以正常工作...但 IE8 不会显示任何阴影，除非它处于“兼容性 View ”中。

我已经通过搜索/谷歌查看了许多“解决方案”，但阴影仍然只出现在“兼容性 View ”中。

关于如何在不改变模式的情况下让它显示的任何想法？

注意:使用 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's polyfill )。我试过 cssSandpaper .我试过 CSS3PIE .但是它们都没有在 Internet Explorer 8 中向我显示文本阴影(CSS3PIE 不具有 text-shadow)。我也试过 double-markup method .但事实并非如此。

然后我找到了Whykiki's blog post并简单地添加了 filter: dropshadow(color=#000000, offx=2, offy=2); 与 display: block; 相结合。就是这样。有些人可能会尝试使用 zoom: 1; 而不是 display: block; 来激活它。 filter: glow(color=#000000,strength=2); 也有效。正如您将看到的，MS 阴影不带有模糊。我可以接受。

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 */
}