IE9中的css3 text-shadow

Question

有一个简单的方法让css3 text-shadow在IE9中工作吗？至少一个文本阴影会很棒.我想理想情况下也支持IE8.我希望有一个简单的jquery插件或.htc文件,它只是查看元素的text-shadow css属性并为IE9实现它.

Answer 1

是的,但不是你想象的那样.根据caniuse(非常好的资源),没有支持,也没有可用于添加text-shadow对IE9的支持的polyfill.但是,IE有自己的专有文本阴影(详见此处).

示例实现,取自他们的网站(在IE5.5到IE9中工作):

p.shadow { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}

对于跨浏览器兼容性和面向未来的代码,请记住还要使用CSS3标准text-shadow属性(在此处详述).考虑到IE10已经正式宣布放弃对传统dx过滤器的支持,这一点尤为重要.展望未来,IE10 +仅支持CSS3标准text-shadow.

Answer 2

由于IE9不支持CSS3 text-shadow,我只会使用IE的filter属性.实例:http://jsfiddle.net/dmM2S/

text-shadow:1px 1px 1px red; /* CSS3 */

可以替换为

filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/

你可以得到非常相似的结果.

Answer 3

试试CSS Generator.

您可以选择值并在线查看结果.然后你得到剪贴板中的代码.
这是生成代码的一个示例:

text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);

Answer 4

我正在寻找一种跨浏览器的文本笔划解决方案,当覆盖在背景图像上时可以正常工作.我认为我有一个解决方案,不涉及额外的标记,js和IE7-9中的工作(我没有测试过6),并且不会导致别名问题.

这是使用CSS3 text-shadow的组合,除了IE(http://caniuse.com/#search=text-shadow)之外,它有很好的支持,然后使用IE的过滤器组合.CSS3文本笔划支持目前很差.

IE过滤器

发光滤镜(http://www.impressivewebs.com/css3-text-shadow-ie/)看起来很糟糕,所以我没有使用它.

David Hewitt的答案涉及在方向组合中添加阴影滤镜.然后遗憾地删除了ClearType,因此我们最终得到了错误的别名文本.

然后我将useragentman上建议的一些元素与dropshadow过滤器结合起来.

把它放在一起

此示例为带有白色笔划的黑色文本.我正在使用条件html类来定位IE(http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}