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

【问题标题】：Font anti-aliasing issues with jQuery.fadeIn in IE8?IE8 中 jQuery.fadeIn 的字体抗锯齿问题？
【发布时间】：2010-11-07 22:53:54
【问题描述】：

我在 IE8 中遇到的一个问题让我头疼不已。我正在使用 jQuery 上的 fadeIn 函数来使网站内容淡入。这在所有其他浏览器中都可以正常工作，但是当在 IE8 中完成淡入淡出时，字体抗锯齿似乎发生了变化，导致文本略微移动。

您可以在http://www.ipulse.biz 上查看该网站。我用来导致淡入的代码非常简单，如下所示。

var showContent = function() {

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

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

} // end showContent

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

【问题讨论】：

您在您的网站上使用了答案，但在这里没有接受答案，这真是太棒了。来吧，回馈社区几秒钟。

标签： javascript jquery internet-explorer

【解决方案1】：

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

http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

【讨论】：

这不仅限于 jquery 插件。任何时候在 IE 中使用不透明度，字体都会在半透明部分失去抗锯齿
是的，没错。但是，由于 Philip 显然在使用 JQuery，我觉得在 JQuery 中提供解决方案的链接很好。
不幸的是，我已经尝试过这个解决方案，但它似乎不起作用。事实上，除了 IE8 之外，它还会导致 IE7 中出现问题（以前没有发生过）。
这行得通，但不幸的是，当过滤器被移除时，文本会有一些轻微的变化（使用“fadeTo”而不是“fadeIn”）。我猜这是不可避免的。

【解决方案2】：

需要在淡入淡出效果完成后调用（如500ms后等）

【讨论】：

【解决方案3】：

我知道我的回答来得太晚了，但是反过来想怎么样？ IE7 / IE8 不为 Faded 文本保留抗锯齿，因此，如果您有单一颜色背景（例如黑色），您可以创建一个空 div，background-color: #000;位置：绝对；显示：块；并将其放在文本元素上。

如果您的要求是文本 FadeIn 效果，您只需将 FadeOut 应用到其上方的“黑色”层，反之亦然。

这样文本抗锯齿保持不变。

【讨论】：

【解决方案4】：

如前所述，这是由 Internet Explorer 中的 Cleartype 引起的，但有一种解决方法至少可以让这个问题变得可以忍受。

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

这应该会强制 IE 清除透明度，从而正常呈现文本。

不幸的是，它仍然不漂亮。

【讨论】：

【解决方案5】：

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

而不是使用：

$('.element').fadeIn(500)

使用 fadeTo 并淡入 99%：

$('.element').fadeTo(500, 0.99)

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

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

【讨论】：

有趣但与原始问题的要求完全相反。需要应用 cleartype，而不是删除它。

【解决方案6】：

我通过为所需文本添加 css 来解决此问题

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

这只会影响即。我仍然在 ie7 中得到了一个小的转变，但它是例外的。

你可以在这里看到它在http://thriive.com.au/

【讨论】：

【解决方案7】：

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

http://jquery.malsup.com/fadetest.html

【讨论】：

【解决方案8】：

我有一个解决方案：在您的 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');
})

【讨论】：

【解决方案9】：

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

我的情况是它是一个使用 css-sprite 的元素，所以我只需要将它添加到我的 css 中的 sprite 类中：

.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;
}

【讨论】：

【解决方案10】：

我没有使用 JQuery，但我通过使用以下 CSS 解决了一半：

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

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

【讨论】：