Question

我正在经历一些非常奇怪的事情！

我有一个我用JS（jQuery）隐藏的div。像这样：

$('#myDiv').hide();

然后当我像这样做一个淡入淡出时：

$("#myDiv").fadeIn('slow');

然后文本在IE中丢失ClearType但在FF中丢失。如果我选择fadeIn来进行切换，那么一切都很好。

IE是什么，有什么解决方案，因为它看起来很糟糕。 （我现在可能已经知道了ClearType）

Answer 1

快速搜索主题显示以下内容：

jQuery fadeIn/fadeOut IE cleartype glitch

问题似乎是CSS“过滤器”属性不会自动删除。 此问题的最简单解决方案将是手动删除它：

$('#myDiv').fadeIn('slow', function() {
   this.style.removeAttribute('filter');
});

正如上面的博客文章所解释的那样，这是一个相当混乱的解决方案。

摘自博文，包括清洁解决方案解决此问题：

这意味着每一次我们   想要淡化一个元素，我们需要   删除过滤器属性，即   使我们的代码看起来很乱。

一个简单，更优雅的解决方案   是包装.fadeIn（）和   .fadeOut（）函数具有自定义   通过插件接口的功能   jQuery的。代码就是   同样，但不是直接打电话   淡入淡出功能，我们称之为   包装。像这样：

$('#node').customFadeOut('slow', function() { 
   //no more fiddling with attributes here
});

那么，你是怎么做到这一点的？只是在您之后包含以下代码包括jQuery库增加了功能。

(function($) {
    $.fn.customFadeIn = function(speed, callback) {
        $(this).fadeIn(speed, function() {
            if(jQuery.browser.msie)
                $(this).get(0).style.removeAttribute('filter');
            if(callback != undefined)
                callback();
        });
    };
    $.fn.customFadeOut = function(speed, callback) {
        $(this).fadeOut(speed, function() {
            if(jQuery.browser.msie)
                $(this).get(0).style.removeAttribute('filter');
            if(callback != undefined)
                callback();
        });
    };
})(jQuery);

Answer 2

一种方法是在div（通常）白色上设置背景颜色。

Answer 3

当淡入淡出应用于IE时，它正在应用它（至少通过jquery）dxtransform类，这将使它失去任何抗锯齿效果，直到它的不透明度回到一。

Answer 4

我已经成功地采用了一种“通用”解决方案。如果不透明度在0和1之间，则 removeAttribute 不起作用，所以我的两分钱解决方案如下：

将此代码放在jQuery animate方法定义的第一行之后（jquery.x.x.x.js）

animate: function( prop, speed, easing, callback ) {
var optall = jQuery.speed(speed, easing, callback);

/*
 * IE rendering anti-aliasing text fix.
 */
// fix START
var old_complete_callback = optall.complete;
optall = jQuery.extend( optall, {complete: function(){
        if (jQuery.browser.msie) {
            var alpha = $(this).css('opacity');
        if(alpha == 1 || alpha == 0) {
            this.style.removeAttribute('filter');
        }
        }
        if (jQuery.isFunction(old_complete_callback)) {
        old_complete_callback.call(this);
        }
    }
});
// fix END

    ...

希望这会有所帮助......

Answer 5

我设法拉了一些“通用”的＃39;解。如果不透明度在0和1之间，则removeAttribute不起作用，所以我的两分钱解决方案如下：

将此代码放在jQuery animate方法定义的第一行之后（jquery.x.x.x.js）

animate: function( prop, speed, easing, callback ) {
var optall = jQuery.speed(speed, easing, callback);

/*
 * IE rendering anti-aliasing text fix.
 */
// fix START
var old_complete_callback = optall.complete;
optall = jQuery.extend( optall, {complete: function(){
    if (jQuery.browser.msie) {
        var alpha = $(this).css('opacity');
        if(alpha == 1 || alpha == 0) {
            this.style.removeAttribute('filter');
        }
    }
    if (jQuery.isFunction(old_complete_callback)) {
        old_complete_callback.call(this);
    }
}});
// fix END

...

希望这会有所帮助......

Answer 6

我读过Firefox 2在应用不透明度时会使用自己的文本渲染引擎（至少在Mac上）。这有时看起来很奇怪。

我已经用这个CSS来对抗它（它似乎根本不会影响性能）

body {
   -moz-opacity: 0.99;
}

此可能也可以在IE中使用。哦，但你需要使用IE的专有权filter属性。

Answer 7

好的，这是我有史以来最糟糕的解决方案：

<head>
    <script>
        $(function() {
                $(document.body).fadeIn(0);
        });
    </script>
</head>

<body>

    <script>
        $(document.body).hide();
    </script>

    body text
</body>

立即隐藏身体，并在文档完成时将其淡入。然后你基本上禁用了cleartype。

哦，请不要任何人这样做。或者，如果它真的对你有意义，那么测试一下。请记住，在整个DOM加载之前，您不会看到任何内容。我也看到了一些奇怪的图形故障。

IE正在失去ClearType

7 个答案: