2010-03-25 14 views
13

मैं एक परीक्षण फ़ाइल यहाँ अपलोड कर दिया है का उपयोग करते हुए:jQuery: IE8 मार्जिन गिर जब slideUp()/slideDown()

http://dl.dropbox.com/u/2201804/IE8test.html

आप "मुझे क्लिक करें" divs पर क्लिक करते हैं, तो आप देखेंगे स्लाइडबॉउन() का उपयोग करके "फीडबैक" divs दिखाई देते हैं। किसी अन्य बॉक्स में "मुझे क्लिक करें" पर क्लिक करने से वर्तमान में फीडबैक दिखाया जा सकता है और उचित प्रतिक्रिया को स्लाइड किया जा सकता है।

आईई 8 में, स्लाइडअप()/स्लाइडडाउन() क्रियाएं पूरी होने के बाद, बक्से के बीच मार्जिन गिर जाता है।

क्या यह jQuery की एनीमेशन या आईई 8 में डिस्प्ले बग के साथ एक समस्या है?

उत्तर

23

अतिप्रवाह: छिपा हुआ; के रूप में मैं सीएसएस का उपयोग कर समस्या को हल करने में सक्षम नहीं था

काम :)

+1

आईई 8 में एक ही समस्या थी, ओवरफ्लो जोड़ना: तत्व को छुपाया गया जो इसे हल/हल करता है! – DanC

+2

यह मेरे लिए भी काम किया। क्या कोई यह बता सकता है कि यह क्यों काम करता है? क्या यह सिर्फ एक आईई बग है? क्या IE9 एक ही काम करता है? – dkamins

+0

मैं भी यह जानना चाहता हूं कि यह क्यों काम करता है ... ओवरफ्लो क्या होता है: छुपा हुआ मार्जिन गायब होने के साथ क्या करना है? – Sorcy

5

मेरे पास मार्जिन का उपयोग करने के लिए आपके पास कोई समाधान नहीं है, लेकिन यदि आप पैडिंग के साथ मार्जिन को प्रतिस्थापित करते हैं, तो IE8 साथ खेलेंगे। आपके मामले में, आपको एक अतिरिक्त कंटेनर div की आवश्यकता होगी, क्योंकि आप पहले ही पैडिंग का उपयोग कर रहे हैं और आपके पास पृष्ठभूमि रंग सेट है।

तो अपने समाधान ऐसा दिखाई दे सकता:

<div class="assessment"> 
    <div class="inner"> 
    <div class="question"> 
... 

.assessment { 
    padding-top: 20px; 
    background: transparent; 
} 

.assessment .inner { 
    background-color:#DDDDDD; 
    border:1px solid #CCCCCC; 
    color:#555555; 
    display:block; 
    padding:10px 0; 
    text-align:left; 
    width:100%; 
} 

चीयर्स TJ

2

बस मेरे समाधान के साथ इस पुराने धागे को अद्यतन करने के लिए क्या करना चाहिए। मैंने दस्तावेज़ निकाय पर ध्यान केंद्रित करने के लिए स्लाइड टॉगल के कॉलबैक फ़ंक्शन का उपयोग किया क्योंकि मैंने देखा कि पृष्ठ पर कहीं और क्लिक करना डीओएम का एक रिफ्लो का कारण बनता है और मार्जिन वापस आ गया।

.slideToggle(
    500, 
    function() { 
     document.body.focus(); 
    } 
); 
-1

मैं अभी भी इस का उपयोग कर गायब मार्जिन के साथ मुद्दों कर रहा था "अतिप्रवाह: छिपा हुआ" सुझाव, और बस एक कस्टम समारोह के साथ 'डिफ़ॉल्ट' jQuery कार्यक्षमता अधिभावी द्वारा IE8 में पूरी तरह से slideUp/slideDown कार्यक्षमता को अक्षम करने का फैसला किया है कि तत्व अभी भी दिखाएगा या छुपाएगा, लेकिन केवल जब IE8 का उपयोग किया जा रहा था।

इस लक्ष्य को हासिल करने के लिए, मैं एक IE conditional comment इस्तेमाल किया, एचटीएमएल तत्व के लिए एक वर्ग संलग्न इसलिए की तरह करने के लिए:

<!--[if IE 8]><html class="ie8"><![endif]--> 

फिर, मैं अपने जावास्क्रिप्ट की तरह, slideUp/slideDown समारोह को ओवरराइड करने में निम्नलिखित समारोह में परिभाषित किया गया इसलिए:

(function($) { 
    // disable slideDown/slideUp in IE8 due to margin removal issue 
    if ($('html').hasClass('ie8')) { 
     $.fn.slideDown = function() { 
      return this.show(); 
     };   
     $.fn.slideUp = function() { 
      return this.hide(); 
     }; 
    } 
})(jQuery); 

और जिसने मुझे चिंतित किया, मेरे लिए इस मुद्दे को हल किया। उम्मीद है की यह मदद करेगा!