IE يفقد ClearType

Question

أواجه شيئًا غريبًا حقًا!

لدي div أخفيه باستخدام JS (jQuery).مثله:

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

ثم عندما أقوم بالتلاشي مثل هذا:

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

ثم يفقد النص ClearType في IE ولكن ليس في FF.إذا استخدمت التبديل بدلاً من FadeIn، فكل شيء على ما يرام.

ما الذي يفعله IE وهل هناك أي حلول له لأنه يبدو فظيعًا.(لدي ClearType كما تفهم في هذه المرحلة)

Answer 1

وبحث سريع في هذا الموضوع يوضح ما يلي:

مسج fadeIn / الاختفاء التدريجي IE اضحة النوع خلل

والمشكلة يبدو أن أن "تصفية" CSS لا يتم إزالة السمة تلقائيا. سيكون على الحل أبسط لهذه المشكلة يتم إزالته يدويا:

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

وكما يوضح بلوق وظيفة أعلاه، هذا هو الحل فوضوي نوعا ما.

ومقتطفات من بلوق وظيفة، بما في ذلك على حل أنظف لهذه المشكلة:

<اقتباس فقرة>   

وهذا يعني أن كل نحن مرة واحدة   أريد أن تتلاشى عنصر، نحن بحاجة إلى   إزالة السمة التصفية، التي   يجعل لدينا نظرة كود الفوضى.

     

وA، حل أكثر أناقة بسيطة سوف   يكون للالتفاف .fadeIn () و   .fadeOut () وظائف مع العرف   وظيفة من خلال واجهة البرنامج المساعد ل   مسج. سيكون رمز يكون بالضبط   نفسه، ولكن بدلا من استدعاء مباشر   وظائف تتلاشى، فإننا ندعو ل   غلاف. مثل ذلك:

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

<اقتباس فقرة>   

وهكذا، كيف يمكن الحصول على هذا العمل؟ مجرد   وتشمل التعليمات البرمجية التالية بعد   تشمل مكتبة مسج ل   إضافة وظائف.

(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

وطريقة واحدة لتحديد لون الخلفية على شعبة (عادة) الأبيض.

Answer 3

وعندما يتم تطبيق تتلاشى إلى IE، فإنه تطبيقه (على الأقل عن طريق مسج) الطبقة dxtransform، الأمر الذي سيجعل من تفقد أي آثار الحواف حتى التعتيم هو العودة إلى واحد.

Answer 4

ولقد تمكنت من سحب الحل إلى حد ما 'عام'. removeAttribute لا يعمل إذا التعتيم بين 0 و 1، حتى بلدي اثنين سنتا الحل التالي:

ضع كود هذه فقط بعد السطر الأول من مسج تحريك تعريف الأسلوب (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

ولقد تمكنت من سحب الحل إلى حد ما 'عام'. removeAttribute لا يعمل إذا التعتيم بين 0 و 1، حتى بلدي اثنين سنتا الحل التالي:

ضع كود هذه فقط بعد السطر الأول من مسج تعريف الأسلوب الأرواح (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>

وإخفاء فورا الجسم، وتتلاشى في حين الوثيقة كاملة. ثم أنت في الأساس تعطيل اضحة النوع.

وأوه و PLEASE لا أحد أكتاولي القيام بذلك. أو إذا كان يبدو حقا أن يكون له معنى بالنسبة لك، ثم اختباره بشكل جيد. فقط تذكر أنك لن ترى أي شيء حتى DOM كله هو تحميل. ورأيت أيضا بعض مواطن الخلل الرسومية غريبة.