14

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

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

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

然后当我像这样进行淡入淡出时：

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

然后文本在 IE 中丢失 ClearType，但在 FF 中没有。如果我使用切换插入的淡入淡出，那么一切都很好。

IE 在做什么，是否有任何解决方案，因为它看起来很可怕。 （我已经开启了 ClearType，正如您此时可能理解的那样）

4

7 回答 7

24

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

jQuery 淡入/淡出 IE cleartype 故障

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

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

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

摘自博客文章，包括针对此问题的更清洁的解决方案：

这意味着每次我们想要淡化一个元素时，我们都需要删除 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);
于 2009-01-04T14:34:00.037 回答
5

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

于 2009-01-04T15:02:15.220 回答
2

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

于 2009-01-04T14:33:27.823 回答
1

我设法提出了一个有点“通用”的解决方案。如果不透明度介于 0 和 1 之间， removeAttribute不起作用，所以我的两美分解决方案如下：

将此代码放在 jQuery animate 方法定义 (jquery.xxxjs) 的第一行之后

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

    ...

希望这会有所帮助...

于 2012-01-09T11:48:30.893 回答
1

我设法提出了一个有点“通用”的解决方案。如果不透明度介于 0 和 1 之间，removeAttribute 不起作用，所以我的两美分解决方案如下：

将此代码放在 jQuery animate 方法定义 (jquery.xxxjs) 的第一行之后

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

...

希望这会有所帮助...

于 2012-01-10T13:07:25.220 回答
0

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

我已经用这个 CSS 解决了这个问题（它似乎根本不影响性能）

body {
   -moz-opacity: 0.99;
}

这也可以在 IE 中工作。哦，但你需要使用 IE 的专有filter属性。

于 2009-01-04T14:37:15.443 回答
-1

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

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

<body>

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

    body text
</body>

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

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

于 2009-01-26T11:55:32.843 回答