52

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

4

6 回答 6

61

是的，但不是你想象的那样。根据caniuse（一个非常好的资源）的说法，没有支持，也没有可用于向text-shadowIE9 添加支持的 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。

于 2011-08-01T23:35:43.803 回答
26

由于 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*/

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

于 2011-08-01T23:42:17.547 回答
13

试试CSS 生成器。

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

text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);
于 2012-12-06T12:00:20.953 回答
5

我一直在寻找一种跨浏览器的文本笔画解决方案，该解决方案在覆盖在背景图像上时可以工作。认为我对此有一个解决方案，它不涉及额外的标记、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;
}
于 2012-07-18T09:52:11.787 回答
1

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

在我的例子中，我正在寻找一个 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/

于 2012-11-15T20:25:43.240 回答
0

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）。

TIP: If you want to use colors with transparency (alpha-channel) write in a #AARRGGBB notation, where AA stands for a hexadezimal value of the opacity - from 01 to FE, because FF and ironically also 00 means no transparency and is therefore useless.. ^^ Just go a little lower than in the rgba notation because the shadows aren't soft and the same alpha value would appear darker then. ;)

A nice snippet to convert the alpha value for IE (JavaScript, just paste into the console):

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

ISSUES: The text/font behaves like an image after the shadow is applied; it gets pixelated and blurry after you zoom in... But that's IE's issue, not mine.

Live demo of the shadow here: http://jsfiddle.net/12khvfru/2/

于 2015-07-28T20:54:59.207 回答