文字阴影的Safari和IE

可能重复：
Equivalent to text-shadow in IE 文字阴影的Safari和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; 
}

来源

2012-05-22 user823527

一个简单的谷歌搜索会帮助你，文本的类型在IE浏览器的阴影 – Ibu

那么告诉那些有IE浏览器（9之前？）或其他旧浏览器的用户可以“获得更好的浏览器”呢？每一次跨浏览器攻击都是一种折衷，并不清楚这一个是否值得。 –

旧版本的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.

来源

2012-05-22 23:58:40

-4

for safari尝试把这个

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

来源

2012-05-23 00:00:01

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

text-shadow不支持IE，但有上模拟的效果提出了一些建议here。为了完全公平，the result is not impressive。

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

来源

2012-05-23 00:03:58

伟大的答案，浏览器退化是唯一的方法飞行... P.S。jsfiddle链接已经死了。 – Kieron

@Kieron：谢谢！链接固定，但正如我所说的结果是*不*令人印象深刻的:) –

这将适用于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)";

测试上：

谷歌Chrome 19.0.1084.46 m
火狐3.6.16
火狐12.0
歌剧11.64
的Internet Explorer 8.0.6001.18702
的Internet Explorer 9.0.8112.16421IC

来源

2012-05-23 00:11:32 Zuul

文字阴影的Safari和IE

回答

相关问题