使用jQuery在Firefox和Internet Explorer中模糊文本渲染 [英] Text rendering blurred in Firefox and Internet Explorer using jQuery

问题描述

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

Not sure what causes this?

如果我在Firefox中使用slideDown，则在动画完成之前，文本渲染会切去字母的顶部.在IE中可以.

If I user slideDown in Firefox the text rendering cuts off the top of the letters before the animation is complete. This is ok in IE.

如果我随后将动画更改为使用fadeIn，则Firefox中不会发生模糊，但IE中的文本会变得很锯齿.

If I then change the animation to use fadeIn instead, the blur does not happen in Firefox but the text is very jagged in IE.

从过去我问过的另一个有关动画的问题开始，那个家伙告诉我，我应该将要制作动画的内容包装到另一个DIV中，然后对其进行动画处理.这样可以解决由.animateDiv内部内容填充引起的混乱.

From another question I have asked in the past pertaining to animation, the guy told me that I should wrap that which I want to animate in another DIV and animate that instead. This sorted out the jerkiness caused by the padding on the content inside the .animateDiv.

在jQuery中也有技巧来渲染文本

Is there a trick to the text rendering as well in jQuery

推荐答案

您需要使用一种技术.基本上，IE中的任何淡入淡出都必须由CSS过滤器完成，这实际上是IE特有的东西，实际上是FUBARs CelarType ...因此，当您完成淡入淡出时，您需要删除它留下的filter .

You need to use a technique like here or here. Basically any fading in IE has to be done by a CSS filter, which is actually an IE specific thing that really FUBARs CelarType...so when you're finishing fading in or out, you need to remove that filter it leaves behind.

现在对于部分淡入淡出的文本，这无济于事，但是如果您一直淡入淡出 ，这将清除结果...在淡入淡出时，您仍然文本参差不齐，这就是IE令人遗憾的行为方式(IE9可以解决此问题，但IE7/8不会在很长一段时间内都无法使用).

Now for partially faded text, this won't help, but if you're fading all the way in or out, this will clear up the result...during fading you'll still have jagged text, this is just how IE behaves unfortunately (IE9 fixes this, but IE7/8 aren't going anywhere for a long time).

如果您在第一个链接中使用该技术，只需在每次使用它们之前就包含这些函数(仅一次)，就像这样:

If you use the technique in the first link, just include the functions (just once) before using them anywhere, like this:

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

然后而不是.fadeIn()，而是调用.customFadeIn()，如下所示:

Then instead of .fadeIn(), you call .customFadeIn() instead, like this:

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

这篇关于使用jQuery在Firefox和Internet Explorer中模糊文本渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！