Safari 和 IE 的文本阴影 [重复]答案

【问题标题】：text-shadow for Safari and IE [duplicate]Safari 和 IE 的文本阴影 [重复]
【发布时间】：2012-07-22 20:27:23
【问题描述】：

可能重复：
Equivalent to text-shadow in IE

我有这个在 Safari 中运行良好的文本阴影。但它不在IE中。如何为 Safari 和 IE 获得相同的阴影效果？

<a class="feast_info" title="title">feast</a>

.feast_info {
    cursor: pointer;
    color: green;
    text-shadow: 2px 2px 2px #303030;
}

【问题讨论】：

一个简单的谷歌搜索会帮助你，在 IE 中输入 text-shadow
告诉那些拥有 IE（9 之前？）或其他旧浏览器的人“获得更好的浏览器”怎么样？每次跨浏览器破解都是一种权衡，尚不清楚这是否值得。

标签： html css

【解决方案1】：

旧版本的 Internet Explorer 没有实现这些 CSS 结构。你可以在你的 CSS 中使用它：

Internet Explorer 8：

#text_block_id {
   -ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99)";
}

Internet Explorer 5.5-7：

#text_block_id {
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#99cc99);
}

将这两行添加到您的 CSS 中，您将获得对 Internet Explorer 5.5 到 8 的支持。

【讨论】：

【解决方案2】：

text-shadow 不受 IE 支持，但是有一些建议 here 模拟效果。不过为了公平起见，the result is not impressive。

我强烈建议坚持优雅降级的概念，并在不支持它们的浏览器上丢弃非关键影响。如果它是绝对必须的（即为了品牌识别）并且如果它的应用范围允许（即必须只出现在一个地方），您可以将预渲染的内容作为 png 图像提供给 IE。

【讨论】：

很好的答案，浏览器降级是飞行的唯一途径...P.S. jsfiddle 链接已失效。
@Kieron：谢谢！链接已修复，但正如我所说，结果不令人印象深刻:)

【解决方案3】：

这将在最常见的浏览器中应用text-shadow（请参阅下面的测试列表）：

CSS

text-shadow: 1px 1px 2px #444444;
filter: dropshadow(color=#444444, offx=1, offy=1);
filter: shadow(color=#444444,direction=135,strength=2);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#444444,direction=135,strength=2)";

测试日期：

谷歌浏览器 19.0.1084.46 m
火狐 3.6.16
火狐12.0
Opera 11.64
Internet Explorer 8.0.6001.18702
Internet Explorer 9.0.8112.16421IC

【讨论】：

【解决方案4】：

对于 safari 试试把这个

-webkit-text-shadow: 2px 2px 2px #303030;

【讨论】：

你似乎没有读过这个问题。