IE9 中的 css3 文本阴影

Posted 2023-02-21

【中文标题】IE9 中的 css3 文本阴影

【英文标题】：css3 text-shadow in IE9

【发布时间】：2011-10-17 20:27:44

【问题描述】：

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

【参考方案1】：

是的，但不是你想象的那样。根据caniuse（一个非常好的资源）的说法，没有支持也没有可用于将text-shadow 支持添加到IE9 的polyfill。但是，IE 有自己专有的文本阴影 (detailed here)。

示例实现，取自他们的网站（适用于 IE5.5 到 IE9）：

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

为了实现跨浏览器兼容性和代码的面向未来，请记住还要使用 CSS3 标准 text-shadow 属性 (detailed here)。考虑到 IE10 已经正式向drop support for legacy dx filters 宣布了他们的意图，这一点尤其重要。今后，IE10+ 将仅支持 CSS3 标准text-shadow。

【讨论】：

当您说过滤器在 IE10 中不起作用时，这是否意味着如果我将浏览器模式更改为 IE9，它们甚至都不起作用？因为在浏览器模式 IE9 的 IE10 中，这些过滤器都不适合我。我是否应该假设它们可以在真正的 IE9 浏览器上运行？

@andrewtweber 在 browserstack.com 中验证这一点可能是有意义的——但是，是的，这听起来像是 IE10 引擎完全放弃了它。在 IE9 中，选择 IE7 模式也有类似的怪癖（即 ie7 不喜欢 console.log() 但 ie9 在 ie7 模式下处理得很好）

我正在使用 IE11 来模拟旧版浏览器。值得一提的是，渲染这些滤镜的函数默认是deactivated？

【参考方案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*/

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

【讨论】：

滤镜：阴影（颜色=红色，方向=130，强度=1）； /* IE 专有过滤器*/ 比没有文本阴影更糟糕。

filter:glow(color=black,strength=1) 似乎效果更好

小心同时指定filter: Shadow 和text-shadow，就像在你的fiddle 中一样。毕竟，IE10 将支持text-shadow，我假设它也支持filter: Shadow。应用这两个属性的结果可能很有趣。

@feklee：IE10 放弃了对过滤器的支持，以便更加符合标准：blogs.msdn.com/b/ie/archive/2011/12/07/…。如果您检查 IE10 中的小提琴，您会发现只有 CSS3 text-shadow 有效。

【参考方案3】：

试试CSS Generator。

您可以选择值并在线查看结果。然后您会在剪贴板中获取代码。 这是生成代码的一个示例：

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

【参考方案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'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;

【讨论】：

+1 这是一个很好的方法，因为它可以防止未来的 IE 版本（可能支持 text-shadow）将 text-shadow 和过滤器应用于相同的文本。

@Moses：事实上，在这种情况下是不必要的，因为引入text-shadow（IE10）的IE版本也是相同的版本，它放弃了对旧filter样式的支持，所以他们永远不会发生冲突。 （但是，对于其他样式，这是必要的——例如，IE9 支持 transform，因此可能与做同样事情的 filter 样式发生冲突，结果混乱）

我找到的最好看的解决方案！ :)

【参考方案5】：

我试用了上面提到的过滤器，但非常不喜欢它所产生的效果。我也不想使用任何插件，因为它们会减慢加载时间以获得看起来如此基本的效果。

在我的例子中，我正在寻找具有 0px 模糊的文本阴影，这意味着阴影是文本的精确复制品，但只是偏移和落后。使用 jquery 可以轻松地重新创建此效果。

<script>
    var shadowText = $(".ie9 .normalText").html();  
    $(".ie9 .normalText").before('<div class="shadow">' + shadowText + '</div>');
</script>
<style>
    .ie9 .shadow  position: relative; top: 2px; left: -3px; 
</style>

这将创建与下面的 css3 文本阴影相同的效果。

    text-shadow: -3px 2px 0px rgba(0, 0, 0, 1.0);

这是一个工作示例（请参阅主横幅图片上方的白色大文本）http://www.cb.restaurantconnectinc.com/

【参考方案6】：

crdunst 的答案非常简洁，是我找到的最好看的答案，但没有说明如何使用，而且代码比需要的要大。

您需要的唯一代码：

#element 
    background-color: #cacbcf;
    text-shadow: 2px 2px 4px rgba(0,0,0, 0.5);
    filter: chroma(color=#cacbcf) progid:DXImageTransform.Microsoft.dropshadow(color=#60000000, offX=2, offY=2);

首先您必须指定background-color - 如果您的元素应该是透明的，只需复制父元素的背景颜色或让它继承即可。色度过滤器处的颜色必须与背景颜色匹配以修复文本周围的那些伪影（但这里必须复制颜色，不能写inherit）。请注意，我没有缩短 dropshadow-filter - 它可以工作，但阴影随后会被切割到元素尺寸（大阴影时很明显；尝试将偏移量设置为至少 4）。

提示：如果您想使用具有透明度的颜色（alpha 通道），请使用 #AARRGGBB 表示法，其中 AA 代表不透明度的十六进制值 -从 01 到 FE，因为 FF 并且具有讽刺意味的是，00 也意味着没有透明度，因此无用.. ^^ 只需比 rgba 符号低一点，因为阴影不柔和，相同的 alpha 值会显得更暗。 ;)

一个不错的 sn-p 转换 IE 的 alpha 值（javascript，只需粘贴到控制台）：

var number = 0.5; //alpha value from the rgba() notation
("0"+(Math.round(0.75 * number * 255).toString(16))).slice(-2);

问题：应用阴影后文本/字体的行为类似于图像；放大后它会变得像素化和模糊……但这是 IE 的问题，不是我的问题。 阴影的现场演示：http://jsfiddle.net/12khvfru/2/