IE 11中的模糊文本

Question

有关于模糊文字的tutorial。它适用于Chrome，Firefox，但不适用于Internet Explorer。它变成了模糊黑影的大块。

在Internet Explorer 11中：

在Chrome中：

CSS如下：

#slogan {
    color: #000;
    display: none;
    font-family: 'Roboto', sans-serif;
    font-size: 60px;
    font-weight: 100;
    height: 100px;
    left: 50%;
    margin-left: -500px;
    position: absolute;
    text-align: center;
    top: 45%;
    width: 1000px;
    z-index: 4;
}
#slogan span {
    text-shadow: 0 0 4px #000;
    color: transparent;
}

JavaScript的：

$('#slogan').lettering();
var text = $('#slogan'),
    numLetters = text.find("span").length;
text.find("span").css('textShadowBlur', 50);
var cnt = 1;
var timer_init;
function randomBlurize() {
    text.find("span:nth-child(" + cnt + ")")
        .animate({
          'textShadowBlur': 0,
          'textShadowColor': 'rgba(0,0,0,' + (Math.floor(Math.random()*200)+55) + ')'
        });
    if(cnt < numLetters) {
        cnt++;
        timer_init = setTimeout(randomBlurize, 200);
    } else {
        clearTimeout(timer_init);
    }
}
$('#slogan').fadeIn(100, function() {
    randomBlurize();
});

HTML：

<div id="slogan">Design To Inspire</div>

不知怎的，jsFiddle无法重新产生问题，但我仍然制作了fiddle。我的问题是：如何修复IE 11的问题？

---

更新

以下是使用@ dcc答案的test link。

Answer 1

在早于5.5版的Internet Explorer版本9中，您可以使用IE特定的CSS过滤器和过渡属性来模糊文本或图像，并执行许多其他效果。

要对文字创建模糊效果，请使用filter:Blur(Direction=XX, Strength=XX)。该规则要求使用height:和width:来定义目标元素。

p { filter:Blur(Direction=45, Strength=8);height:40;width:400;font-size:20pt;font-weight:bold; }

如果您想在较新版本的IE中使用这些功能，可以通过设置元

强制它们在IE9模式下运行

<meta http-equiv="X-UA-Compatible" content="IE=9" />

---

另外

• MSDN Article: Visual Filters and Transitions
• MSDN Article: Blur Filter