jquery - 使用 jQuery 在 Firefox 和 Internet Explorer 中呈现模糊的文本

Question

不确定是什么原因造成的？

如果我在 Firefox 中使用 SlideDown，文本渲染会在动画完成之前切断字母的顶部。这在 IE 中没问题。

如果我随后将动画更改为使用 fadeIn，则 Firefox 中不会出现模糊，但 IE 中的文本会出现锯齿状。

从我过去问过的有关动画的另一个问题中，那个人告诉我，我应该将我想要制作动画的内容包装在另一个 DIV 中，然后对其进行动画处理。这解决了 .animateDiv 内内容填充引起的抖动问题。

jQuery 中的文本渲染也有技巧

Answer 1

你需要使用一种技巧 like here或here 。基本上，IE 中的任何淡入淡出都必须通过 CSS 过滤器来完成，这实际上是 IE 特定的东西，真正 FUBARs CelarType...所以当你完成淡入或淡出时，你需要删除 filter它留下了。

现在，对于部分淡入淡出的文本，这不会有帮助，但如果您一直淡入或淡出，这将清除结果...在淡入淡出期间，您仍然会有锯齿状文本，不幸的是，这正是 IE 的行为方式(IE9 修复了此问题，但 IE7/8 很长一段时间都不会消失)。

如果您使用the technique in the first link ，只需在任何地方使用函数之前包含这些函数(仅一次)，如下所示:

$.fn.customFadeIn = function(speed, callback) {
    $(this).fadeIn(speed, function() {
        if(!$.support.opacity)
            $(this).get(0).style.removeAttribute('filter');
        if(callback != undefined)
            callback();
    });
};

然后代替 .fadeIn() ，您调用.customFadeIn()相反，像这样:

$("#uglyThingInIE").customFadeIn(500);