Question

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

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

var showContent = function() {

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

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

} // end showContent

代码由setInterval函数调用，如果这有任何区别。

Answer 1

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

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

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

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

Answer 2

这是由于Internet Explorer中的ClearType消失引起的，这非常烦人。

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

Answer 3

我知道我的答案有点太晚了，但是思考怎么样反之亦然？ IE7 / IE8不保留褪色文本的抗锯齿，因此，如果你有一个单色背景（例如黑色），你可以创建一个空div，背景色：＃000;位置：绝对;显示：块;并将其放在文本元素上。

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

这样，文本反别名保持不变。

Answer 4

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

而不是使用：

$（ '元素'）。淡入（500）

使用fadeTo并淡出到99％：

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

你不会看到1％的差异，因为它没有达到100％的不透明度，IE似乎不适用于cleartype。

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

Answer 5

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

Answer 6

我通过在css中添加所需文本来修复此问题

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

这只会影响ie。我仍然在ie7中获得了一个小的转变，但它是可以理解的。

您可以在此处看到它http://thriive.com.au/

Answer 7

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

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

Answer 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');
})

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

Answer 10

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

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

完全不透明的文字现在是消除锯齿的，但半透明的不是。然而，对于半透明文本来说，这不是一个大问题。

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

10 个答案: