Question

可能重复：
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;
}

Answer 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。

Answer 2

IE不支持

text-shadow，但有一些关于模拟效果的建议here。尽管如此，the result is not impressive。

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

Answer 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)";

经过测试：

Google Chrome 19.0.1084.46 m
Firefox 3.6.16
Firefox 12.0
Opera 11.64
Internet Explorer 8.0.6001.18702
Internet Explorer 9.0.8112.16421IC

Answer 4

for safari尝试把这个

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

Safari和IE的文本阴影

4 个答案: