2014-05-22 8 views
8

मुझे इंटरनेट एक्सप्लोरर (आईई 11 के रूप में अद्यतित) के साथ कठिनाइयों का सामना करना पड़ रहा है। मैं कुछ जावास्क्रिप्ट लिखने की कोशिश कर रहा हूं जो मुझे गतिशील रूप से स्टाइल शीट बनाने की अनुमति देगा, इसे दस्तावेज़ में जोड़ें और शैलियों में हेरफेर करें, जिनमें से अधिकांश लेख पर आधारित है David Walsh wrote। उनके पास बनाए गए style टैग की media विशेषता सेट करने का विचार था, इसलिए विरासत ब्राउज़र उन नियमों को अनदेखा कर देंगे जिन्हें वे समर्थन नहीं दे सकते - एक विचार जिसे मैं वास्तव में पसंद करता हूं, लेकिन वह मुझे कुछ समस्याएं पैदा कर रहा है।आईई तुरंत मेरे सीएसएस नियमों को क्यों लागू नहीं करेगा?

जब मैं एक media विशेषता "screen" तुलना में अधिक जटिल के साथ एक style टैग बनाने, फायरफॉक्स और क्रोम तुरन्त नए नियम लागू होंगे (यह मानते हुए मीडिया क्वेरी से मेल खाता है), लेकिन आईई तक पेज रीपेंट किसी तरह शुरू हो रहा है नहीं होगा (आकार बदलने पृष्ठ सबसे प्रभावी लगता है)।

मैंने fiddle to better demonstrate the issue बनाया है। मैं फ़ायरफ़ॉक्स और क्रोम में हरे रंग की पृष्ठभूमि वाले परिणाम पैनल देख रहा हूं लेकिन आईई में लाल होने तक लाल रंग को मजबूर किया जाता है। वास्तव में एक रीपेंट मजबूर कर के रूप में, मुझे कोई सफलता के लिए कुछ चाल की कोशिश की है:

  • document.body.className = document.body.className;
  • element.appendChild(document.createTextNode(' '));
  • document.body.style.width = (previousWidth + 1) + 'px'
  • all and (min-width: 10px) को मीडिया क्वेरी को सरल बनाना और यहां तक ​​कि सिर्फ (min-width: 10px)

मेरा प्रश्न है "शैलियों को लागू करने के लिए मैं आईई कैसे प्राप्त कर सकता हूं वे जोड़े गए हैं? "(या कम से कम, जितना संभव हो सके उतने करीब के करीब, मैं setTimeout की आवश्यकता होने के साथ रह सकता हूं)

मैं साइट पर jQuery का उपयोग कर रहा हूं इसलिए मैं एक jQuery उत्तर स्वीकार करूंगा, लेकिन मैं लाइब्रेरी निर्भरता के बिना किसी को प्राथमिकता देनी चाहिए, इसलिए मैं बेहतर समझता हूं कि समस्या का कारण क्या है और इसे कैसे हल किया जाए।

+2

+1 वास्तव में एक अच्छा सवाल के निर्माण के लिए, यह इन दिनों इतना दुर्लभ है! – Niklas

+0

मुझे आईई में एक हरा बीजी दिखाई देता है? आईई 9 और आईई 10, आईई 11 का परीक्षण नहीं कर सकते हैं। – Dieterg

+0

जब मैं jsFiddle और ऑफ़लाइन में आपकी स्क्रिप्ट का परीक्षण करता हूं, IE11 XSS और अवरुद्ध सामग्री के लिए चेतावनी दिखा रहा है। तो मुझे लगता है कि समस्या ब्राउज़र सुरक्षा के कारण हो सकती है। इस अद्यतन को http://jsfiddle.net/rLLAF/10/ देखें जब आप खुले कंसोल के साथ IE11 में रन दबाते हैं तो आपको एक ही त्रुटि दिखाई देनी चाहिए। मैंने बस 'console.log (this.media.screen) लगाया; '102 के भीतर। जैसा कि मैंने कहा था कि यह जेएसफ़िल्ड के कारण कोई समस्या नहीं है, यह तब भी हो रहा है जब आप सब कुछ डाउनलोड करते हैं और एक HTML फ़ाइल में डालते हैं। –

उत्तर

3

आप जावास्क्रिप्ट की लाइन 65 अक्षम करते हैं यह काम करने के लिए प्रकट होता है:

// Webkit hack. 
// element.appendChild(document.createTextNode('')); 

इस के बाद से जाहिरा तौर पर एक हैक है, शायद यह हटाया जा सकता है, या अधिक सुंदर ढंग से चारों ओर से काम किया।

Fiddle

+0

जब मैंने मूल आलेख में "वेबकिट हैक" वाक्यांश देखा, तो मैंने कभी सोचा नहीं कि क्यों हैक पहले स्थान पर था। मुझे इसके बारे में ऑनलाइन कोई जानकारी भी नहीं मिल रही है और इसे हटाने से क्रोम या सफारी को तोड़ने के बिना मेरी समस्या ठीक हो जाती है। धन्यवाद^_^ –

+0

एक खुशी। मूल लेखक को इसके बारे में जानने के लायक हो सकता है। – graphicdivine

+0

मैंने भी सोचा। मैंने उसे बताने के लिए आलेख में एक टिप्पणी जोड़ा है। लेख के केवल एक वर्ष के बाद से, संभवतः सफारी का एक संस्करण अभी भी तैर रहा है जिसके लिए हैक की आवश्यकता होगी। मैं देखूंगा कि वह या उसके पाठक कुछ भी कहते हैं या नहीं। –

0

क्या आपने <!DOCTYPE> जोड़ने का प्रयास किया है? मुझे आपके परिदृश्य के बारे में पता नहीं है, लेकिन आईई में स्टाइल समस्या के लिए <!DOCTYPE> ने मेरी समस्या हल की है। यह ब्राउज़र का उपयोग कर रहे एचटीएमएल संस्करण के बारे में बताता है ताकि ब्राउजर आपके दृश्य को बिल्कुल वांछित कर सके जो आपको चाहिए। एचटीएमएल 5 के लिए यह आसान है <!DOCTYPE html>। आपको सभी डॉक्टरेट here की सूची मिल जाएगी।

<!DOCTYPE html> 
<html> 
    <body> 

    </body> 
</html> 
+0

हाँ, यह वह DOCTYPE है जिसका मैं उपयोग कर रहा हूं। कोई आनंद नहीं है। हालांकि धन्यवाद। –

संबंधित मुद्दे