Javascript IE8中jQuery.fadeIn的字体抗锯齿问题？

我在IE8中遇到了一个问题，我的头撞到了墙上。我在jQuery上使用fadeIn函数使站点内容淡入。这在所有其他浏览器中都可以很好地工作，但是当fadeIn在IE8中完成时，字体抗锯齿似乎发生了变化，导致文本稍微移动

您可以在上看到该站点。我用来引起淡入的代码非常简单，如下所示

var showContent = function() {

  $('#content div:first').fadeIn(1000);

  $('#navigation').fadeIn(500);

} // end showContent

---

代码由setInterval函数调用，如果这有什么不同的话。

这是由于Internet Explorer中ClearType消失造成的，这很烦人

---

它需要在淡入淡出效果完成后调用（例如500毫秒后等）

我知道我的答案来得有点晚，但反过来想怎么样？ IE7/IE8不保留褪色文本的反别名，因此，如果您有单色背景（例如黑色），您可以创建一个空div，背景色：#000；位置：绝对位置；显示：块；然后把它放在文本元素上

如果您的请求是具有文本淡入淡出效果，您只需将淡出应用于其上的“黑色”层，反之亦然

---

通过这种方式，文本反别名保持不变。

如前所述，这是由Internet Explorer中的Cleartype造成的-但有一种解决方法，至少可以容忍此问题

$('#navigation').fadeIn(500, function(){
    if ($.browser.msie){this.style.removeAttribute('filter');}
});

这将迫使IE清除透明度，从而正常呈现文本

---

不幸的是，它仍然不太好看。

很抱歉回复得太晚，但我遇到了同样的问题，并且在寻找解决方案时遇到了这个话题。在这个主题中，我没有找到一个有效的解决方案，但我提出了一个简单的解决方案，似乎可以完美地解决这个问题

代替使用：

$（'.element'）.fadeIn（500）

使用fadeTo并淡入99%：

$（'.element'）.fadeTo（500,0.99）

你看不到1%的差异，因为它没有达到100%的不透明度，IE似乎没有应用cleartype

---

让我知道这是否适用于其他人。

我通过为所需文本添加css解决了这一问题

过滤器：α（不透明度=99）

这只会影响ie。我在ie7中仍然有一个小的变化，但这是不可接受的

---

您可以看到它在这里工作

找到了该问题的现成解决方案

---

我有一个解决方案：在DOM上创建另一个DIV作为覆盖，并仅在该DIV上执行淡入淡出功能。它将显示为内容正在淡入/淡出。这种方法的性能也更高，因为您只淡入一个DIV，而不是多个元素。以下是一个例子：

$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
    // Step 1: change your content underneath the hidden div
    // Step 2: hide the overlay
    $('#containeroverlay').fadeOut('normal');
})

---

我也有在褪色区域的透明PNG的问题，但结合上面的JS删除过滤器属性和一点点css的图像黑色的“边框”在褪色时消失了

在我的例子中，它是一个使用css精灵的元素，所以我只需将它添加到css中的精灵类中：

.sprite{
    background-image: url('/images/sprite.png');
    background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF');   /* IE6 & 7 */
    zoom: 1;
}

---

我没有使用JQuery，但我通过使用以下CSS解决了这个问题：

div
{
    opacity: .15;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
    opacity: 1;
    -ms-filter:"";
}

---

完全不透明的文本现在是抗锯齿的，但半透明的不是。不过，对于半透明文本来说，这并不是什么大问题。

这并不局限于jquery插件。在IE中使用不透明度时，字体在半透明部分会丢失其抗锯齿效果是的，这是正确的。然而，由于Philip显然在使用JQuery，我觉得在JQuery中链接到它的解决方案是很好的。不幸的是，我已经尝试过这个解决方案，但它似乎不起作用。事实上，除了IE8（以前没有发生过）之外，它还导致IE7中出现问题。这是可行的，但不幸的是，当删除过滤器时（使用“fadeTo”而不是“fadeIn”），文本会发生一些轻微的移动。我猜这是不可避免的。你在你的网站上使用了答案，但在这里没有接受答案，这真的很经典。来吧，回馈社区几秒钟。很有趣，但与最初的问题完全相反。需要应用cleartype，而不是删除它。