2009-01-04 11 views
14

खो रहा है मैं वास्तव में कुछ अजीब अनुभव कर रहा हूँ!आईई क्लीयरटाइप

मेरे पास एक div है कि मैं जेएस (jQuery) के साथ छिपा रहा हूं। इस तरह:

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

फिर जब मैं इस तरह एक fadein बनाने:

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

फिर पाठ IE में ClearType खो देता है लेकिन एफएफ में नहीं। अगर मैं फीडइन के इंस्टॉलेशन टॉगल के साथ जाता हूं, तो यह ठीक है।

आईई क्या है और इसके लिए कोई समाधान है क्योंकि यह भयानक लग रहा है।

उत्तर

24

विषय पर एक त्वरित खोज निम्न दिखाता है:

jQuery fadeIn/fadeOut IE cleartype glitch

समस्या यह है कि सीएसएस "फिल्टर" विशेषता स्वचालित रूप से नहीं हटाया जाता है हो रहा है। सबसे सरल उपाय इस समस्या का इसे मैन्युअल रूप से हटाने के किया जाएगा: ब्लॉग पोस्ट के ऊपर बताते

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

grr वे इसे मानक फीडइन में क्यों नहीं डाल सकते हैं। बस इसकी पुष्टि 1.3.1 में नहीं है (कम से कम अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता के बिना नहीं) तो शायद इस समाधान के साथ –

+2

भी नहीं है, यह अभी भी मेरी राय में बहुत भयानक लग रहा है। यह स्पष्ट रूप से स्पष्ट है कि एक गड़बड़ है। रंगीन बक्से में फीका करने के लिए जितना संभव हो सके प्रयास करें और टेक्स्ट को तुरंत प्रकट करें –

+0

jQuery 1.9 के रूप में, jQuery.browser पहचानकर्ता को बहिष्कृत किया गया है। बहुत बढ़िया ... :-("ब्राउज़र पहचान" के बजाय उपरोक्त कोड को "फीचर डिटेक्शन" के माध्यम से कार्यान्वित करने के लिए कोई सुझाव? – ClearCloud8

2

फीका आईई करने के लिए लागू किया जाता है (मैं के रूप में आप शायद इस बिंदु पर समझ में पर ClearType है), यह यह (कम से कम jQuery के माध्यम से) dxtransform वर्ग है, जो यह जब तक किसी भी एंटीलायज़िंग़ प्रभाव खो कर देगा आवेदन कर रहा है इसकी अस्पष्टता एक पर वापस आ गई है।

0

मैं फ़ायरफ़ॉक्स 2 जब भी अस्पष्टता (कम से कम Mac पर) लागू किया जाता है उसका स्वयं का पाठ प्रतिपादन इंजन का उपयोग करता है पढ़ा है। यह कभी-कभी अजीब लग रहा है।

मैं इस सीएसएस के साथ इस लड़ा है (और यह बिल्कुल प्रदर्शन को प्रभावित करने के लिए नहीं लगता है)

body { 
    -moz-opacity: 0.99; 
} 

IE में यह मई काम भी। ओह, लेकिन आपको आईई की प्रोप्राइटी filter संपत्ति का उपयोग करने की आवश्यकता होगी।

5

एक तरीका div (सामान्यतः) सफेद पर पृष्ठभूमि रंग सेट करना है।

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

<body> 

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

    body text 
</body> 

तुरंत शरीर छुपाने के लिए, और जब दस्तावेज़ पूरा हो गया है में यह फीका:

+0

ने विस्टा –

+2

पर आईई 7 में मेरे लिए काम नहीं किया है यह मेरे लिए दो बार काम करता है इस मुद्दे पर आओ। मुझे लगता है कि आपको उस तत्व पर पृष्ठभूमि रंग सेट करने की आवश्यकता है जिसे फीका या बाहर किया जा रहा है। –

-1

ठीक है यहाँ कभी मेरी सबसे खराब समाधान है। फिर आप अनिवार्य रूप से क्लीयरटाइप अक्षम करते हैं।

ओह और कृपया कोई भी कार्यवाही नहीं करता है। या यदि यह वास्तव में आपके लिए समझ में आता है तो इसे अच्छी तरह से जांचें। बस याद रखें कि जब तक पूरा डोम लोड नहीं हो जाता तब तक आप कुछ भी नहीं देख पाएंगे। मैंने कुछ भयंकर ग्राफिकल ग्लिच भी देखे।

1

मैंने कुछ हद तक 'सामान्य' समाधान खींचने में कामयाब रहा है। यदि अस्पष्टता 0 और 1 के बीच है, इसलिए मेरी दो सेंट समाधान इस प्रकार removeAttribute काम नहीं करता:

सिर्फ jQuery चेतन विधि परिभाषा की पहली पंक्ति के बाद इस कोड को रखो (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 

    ... 

आशा इस में मदद मिलेगी ...

1

मैं कुछ हद तक एक 'सामान्य' समाधान खींचने के लिए प्रबंधित किया है। यदि अस्पष्टता 0 और 1 के बीच है, इसलिए मेरी दो सेंट समाधान इस प्रकार removeAttribute काम नहीं करता:

सिर्फ jQuery चेतन विधि परिभाषा की पहली पंक्ति के बाद इस कोड को रखो (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 

... 

उम्मीद है कि यह मदद करेगा ...