使用jQuery的Firefox和Internet Explorer中的文本渲染模糊

Question

不確定是什麼原因造成的？

如果我的用戶在Firefox中滑動，則文本呈現將在動畫完成之前切斷字母的頂部。這在IE中是可以的。

如果我然後更改動畫以使用fadeIn代替，模糊不會在Firefox中發生，但文本在IE中非常參差。

從另一個問題，我問過去有關動畫，該傢伙告訴我，我應該包裹，我想在另一個DIV動畫，並動畫，而不是。這整理了由.animateDiv內的內容填充引起的急動。

有沒有竅門的文本渲染以及jQuery中

Answer 1

您需要使用技術like here或here。基本上IE中的任何淡入淡出都必須通過一個CSS過濾器完成，這實際上是一個IE特定的事情，真的是FUBAR 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); 

Answer 2

我想IE has a problem with ClearType and animations。不確定FF。