IE正在失去ClearType技术

Question

IE正在失去ClearType技术

14

我遇到了一些非常奇怪的事情！

我有一个使用JS (jQuery) 隐藏的 div。像这样:

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

那么当我这样制作一个fadeIn效果时：

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

如果我使用toggle而不是fadeIn，则文本在IE中失去了ClearType，但在FF中没有。IE到底是怎么回事，有没有解决方案，因为它看起来很糟糕。 (我已经打开了ClearType，你可能在这一点上理解)

- Adis

7个回答

5

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

- redsquare

2

这对我来说已经解决了几次遇到的问题。我认为你需要在淡入或淡出的元素上设置背景颜色。 - Paul D. Waite

2

当在IE中应用淡入淡出效果时，它会将其（至少通过jquery）应用于dxtransform类，这将使其失去任何抗锯齿效果，直到不透明度恢复为1。

- SuperRoach

1

我设法找到了一个有点“通用”的解决方案。如果不透明度在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

    ...

希望这能有所帮助...

- Rogi

1

我成功地找到了一个比较“通用”的解决方案。如果不透明度在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

...

希望这可以帮到你...

- Rogi

0

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

我通过以下CSS解决了这个问题（似乎对性能没有影响）

body {
   -moz-opacity: 0.99;
}

这个在IE上也可能有效。但是你需要使用IE的专有filter属性。

- alex

-1

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

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

<body>

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

    body text
</body>

立即隐藏主体，并在文档完成时淡入。然后，您基本上禁用了清晰字体。

哦，还有请不要有人真的这样做。或者如果它确实对您有意义，请进行充分测试。只需记住，在整个DOM加载完成之前，您将看不到任何内容。我也看到了一些奇怪的图形故障。

- Simon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aron · Accepted Answer

通过快速搜索，找到以下内容：

jQuery淡入淡出IE清晰度问题

问题似乎在于CSS的"filter"属性没有自动移除。解决这个问题最简单的方法是手动删除它：将其手动删除为最简单的解决方式。

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

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

从博客文章中摘录，包括这个问题的更干净的解决方案：

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

一个简单、更优雅的解决方案是通过jQuery的插件接口将.fadeIn()和.fadeOut()函数包装在一个自定义函数中。代码将完全相同，但是除了直接调用淡入淡出函数外，我们调用这个包装器。如下所示：

$('#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);