IE的文字阴影答案

【问题标题】：Text shadow for IEIE的文字阴影
【发布时间】：2012-03-31 15:28:02
【问题描述】：

我正在建立一个网站，我正在使用 text-shadow 功能，但是它不适用于 IE。

图形：

text-shadow: 0.1em 0.1em 0.2em black;

是否有任何解决方案或破解方法来解决这个问题，或者模仿 IE 的文本阴影功能。

【问题讨论】：

标签： html internet-explorer css

【解决方案1】：

对于某些版本的 IE，Dropshadow 过滤器可以满足您的需求：

http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx

【讨论】：

谢谢，在 IE 中似乎没有简单的方法来实现平滑的阴影，显然 IE v10 有 text-shadow :)

【解决方案2】：

我一直在寻找一种跨浏览器的文本笔划解决方案，该解决方案在覆盖在背景图像上时可以工作。认为我对此有一个解决方案，它不涉及额外的标记，js 并且适用于 IE7-9（我没有测试过 6），并且不会导致别名问题。

这是使用 CSS3 text-shadow 的组合，which has good support except IE，然后使用 IE 过滤器的组合。目前 CSS3 文本笔划支持很差。

IE 过滤器：

辉光滤镜looks terrible，所以没用。

David Hewitt's answer 涉及在方向组合中添加阴影过滤器。不幸的是，ClearType 被删除了，所以我们最终得到了严重的别名文本。

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

放在一起

此示例将是带有白色笔划的黑色文本。顺便说一下，我正在使用条件 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;
}

【讨论】：

很好，尽管您可以将 Glow 与 Chroma 一起使用，而且看起来还不错 - see my answer to a similar question。可能比4个阴影更好。 XImageTransform.Microsoft.Alpha(opacity=100)在这里的作用是什么？
嗨，看看上面的 useragentman 链接，它解释了更多关于 IE 过滤器的信息。 IE 过滤器不是我的强项，所以我花了一些时间来玩弄它们，但以上对我来说适用于 IE 版本。如果过滤器可以改进，很高兴收到回复。干杯

【解决方案3】：

IE 过滤器类还会在您拥有的任何背景图像上添加阴影。例如，我有一个 H1 标签，其中有一条线作为背景的一部分，当我打开 IE 文本阴影过滤器时，背景中的线会继承该阴影。

【讨论】：

【解决方案4】：

一段时间以来，我一直在寻找和调查这个问题，并且想在 IE10 上测试我的网站时分享一个可能相互矛盾的发现。

我有这个 html 结构：

<p>Meer info op onze <a class="links" target="_self" href="/leden">ledenpagina</a></p>

结合CSS：

p { display: inline-table;
    color: #FFF;
    text-shadow: 0px 1px 2px #111, 0px 1px 0px #111;
    margin: 0px 20px; }

a.links {
    text-decoration: underline;
    color: #FFFF60;
    font-size: 1.1em; }

如果我在 IE10 中查看此结果，则锚文本“ledenpagina”确实收到了父级（p 标签）中定义的文本阴影样式。假设这可能与组合 text-decoration:underline 选择器有关（通过在 p 标签上应用 text-decoration 进行测试）

结果可以在这里见证：http://tczelem.be（向下滑动标题滑块标签）

所以文本装饰选择器在 IE10 中似乎确实有一些效果。

![在此处输入图片描述][2]

【讨论】：

这不是答案。如果需要帮助，您应该将其作为问题发布。