एक डोमेन तत्व

Question

में कक्षा जोड़ने के बाद यानी 8 को पुन: पेश करने के लिए कैसे मजबूर करें I88 में यदि तत्व क्लासनाम बदलते समय संबंधित सीएसएस के साथ 'पेंट' नहीं करते हैं, तो आप ब्राउज़र को रीफ्रेश करने के लिए कैसे मजबूर कर सकते हैं और IE8 प्रदर्शन को मार नहीं सकते ?

इस पोस्ट (How can I force WebKit to redraw/repaint to propagate style changes?) ने ऑफ़सेट कॉल करने का सुझाव दिया है जो एक पश्चाताप को मजबूर करता है।

इस पोस्ट (http://www.tek-tips.com/viewthread.cfm?qid=1688809) ने एक टिप्पणी की थी जिसमें शरीर तत्व से कक्षा को जोड़ने और निकालने का सुझाव दिया गया था।

इन दोनों दृष्टिकोणों में से 88 प्रदर्शन मारे गए और पहले मेरे लेआउट पर दुष्प्रभाव थे।

सबसे अच्छा तरीका क्या है?

Answer 1

मेरे आईआई 8 मुद्दे के लिए जिस समाधान के साथ आया था वह उस तत्व के आस-पास के माता-पिता पर एक वर्ग को जोड़ने/निकालना था जिसे मैं बदल रहा हूं। चूंकि मैं आधुनिकीकरण का उपयोग कर रहा हूं, मैं IE8 की जांच करता हूं और फिर नया सीएसएस पेंट करने के लिए यह जोड़/निकालें।

 $uicontext.addClass('new-ui-look'); 
     if ($('html').is('.ie8')) { 
      // IE8: ui does not repaint when css class changes 
      $uicontext.parents('li').addClass('z').removeClass('z'); 
     } 

Answer 2

उस पर एक चाल या आकार बदलें।

var ie8 = whateverYouUseToDetectIE(); 
var element = document.getElementById("my-element"); 
element.className += " new-class"; 
if (ie8) { 
    element.fireEvent("resize"); 
} 

Answer 3

इस सवाल का सही जवाब है कि आप वास्तव में content नियम को बदलने की जरूरत है।

.black-element:before { content:"Hey!"; color: #000;} 
.red-element:before { content:"Hey! "; color: #f00;} 

सूचना अतिरिक्त जगह मैं .red-element

Answer 4

इस पर Hey! के बाद जोड़ा अन्य उत्तर यहाँ पर फैलता है। आपको दोनों को एक नई कक्षा (डॉग का उत्तर) जोड़ने की आवश्यकता है और सुनिश्चित करें कि कक्षा में एक अलग सामग्री मान है (एडम का उत्तर)। अकेले वर्ग को बदलना पर्याप्त नहीं हो सकता है। आईई 8 को पुनर्निर्मित करने के लिए मजबूर करने के लिए सामग्री परिवर्तन की आवश्यकता है। यहां एक related blog post है।

$(".my-css-class").addClass("my-css-class2"); 

यहाँ 2 वर्ग एक अलग सामग्री मूल्य होने के साथ सीएसएस है:

यहाँ JQuery नया वर्ग को जोड़ने के बदलने के लिए है

.my-css-class:before {content: "\e014";} 
.my-css-class2:before {content: "\e014 ";} 

Answer 5

हास्यास्पद, इस काम करता है:

function ie8Repaint(element) { 
    element.html(element.html().replace('>', '>')); 
} 

वास्तव में डोम में कुछ भी नहीं बदलता है, इसलिए यह किसी अन्य ब्राउज़र को प्रभावित नहीं करेगा।

Answer 6

मैं कठिनाई का एक बहुत था और कोई लाभ नहीं हुआ सब कुछ करने की कोशिश की ... जब तक मैं IE8

function toggleCheck(name) { 
    el = document.getElementById(name); 
    if(hasClass(el, 'checked')) { 
    el.className = el.className.replace(/checked/,'unchecked'); 
    } else if(hasClass(el, 'unchecked')) { 
    el.className = el.className.replace(/unchecked/,'checked'); 
    } 
    document.body.className = document.body.className; 
} 
function hasClass(element, cls) { 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
} 

के लिए इस की कोशिश की और अब मेरी चेक बॉक्स के लिए मेरे सीएसएस परिवर्तन IE8, क्रोम, और Firefox के लिए खूबसूरती से काम करते हैं!