文本阴影：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 的填充）。我尝试了 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 dropshadow 不带有模糊。我可以忍受这一点。

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 应用不同的解决方案。

它会让你免于头痛:)