Simulating text-stroke in Internet Explorer
除Internet Explorer(显然甚至是IE9 beta)之外,所有浏览器都支持
有什么方法可以使用CSS和/或Microsoft过滤器/行为和/或JavaScript来实现这一目标?
我不需要解决方案才能在IE的较早版本中使用,我的布局不会针对IE7或更早版本进行优化。
我一直在寻找一种跨浏览器的文本笔划解决方案,该解决方案可以覆盖背景图像。我认为我有一个解决方案,它不涉及额外的标记,js,并且可以在IE7-9中运行(我尚未测试6),并且不会引起别名问题。
这是使用CSS3文本阴影(对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。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | #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; } |
这是我从前挖出来的:
http://jsfiddle.net/kovalchik/yJff9/
由于目前正在使用Mac,因此我无法测试它是否确实有效。看起来也有点肮脏。但这可能值得一试:P