IE7 रिश्तेदार/गतिशील रूप से संशोधित पृष्ठ की सामग्री

मैं अगर वहाँ एक विचार कैसे IE7 में निम्नलिखित समस्या से निपटने के लिए होने किसी को भी है सोच रहा था के साथ पूर्ण स्थिति बग:IE7 रिश्तेदार/गतिशील रूप से संशोधित पृष्ठ की सामग्री

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>IE7 absolute positioning bug</title> 
    <style type="text/css"> 
     #panel { position: relative; border: solid 1px black; } 
     #spacer { height: 100px; } 
     #footer { position: absolute; bottom: 0px; } 
    </style> 
    <script type="text/javascript"> 
     function toggle() { 
     var spacer = document.getElementById("spacer"); 
     var style = "block"; 
     if (spacer.style.display == "block" || spacer.style.display == "") { 
      style = "none"; 
     } 
     spacer.style.display = style; 
     } 
    </script> 
    </head> 
    <body> 
    <div id="panel"> 
     <button onclick="toggle();">Click me</button> 
     <br /><br /><br /> 
     <div id="spacer"></div> 
     <div id="footer">This is some footer</div> 
    </div> 
    </body> 
</html>

जब आप IE7 में इस चलाने आप देखेंगे कि "पाद लेख" तत्व "पैनल" के लिए सीएसएस को संशोधित करने के बाद रहता है। आईई 8, एफएफ और क्रोम में परीक्षण किया गया वही उदाहरण बिल्कुल अपेक्षित व्यवहार करता है।

मैंने पहले से ही तत्व की कक्षा को अपडेट करने का प्रयास किया है, लेकिन यह काम नहीं करता है अगर ब्राउजर की विंडो को अधिकतम किया गया है और खिड़की में कोई और आकार परिवर्तन नहीं किया गया है (जो कि हमारे लिए उपयोग किए जाने वाले 9 0% उपयोग मामलों में है उत्पाद .... :() मैं एक सीएसएस-आधारित समाधान के साथ फंस गया हूं, हालांकि मुझे लगता है कि मैं इस मामले में अपवाद कर सकता हूं अगर इसे आसानी से आईई 7-विशिष्ट बनाया जा सकता है (जिसका अर्थ है कि अन्य ब्राउज़र एक में व्यवहार करेंगे इस के साथ मानक तरीका)।

कृपया मदद!

स्रोत

2010-03-18 Matthias Hryniszak

आप doctypes HTML-सख्त या एक्सएचटीएमएल-सख्त का उपयोग करने जा कोशिश की है? फिर क्या होता है? – NotMe

वास्तव में मैंने नहीं किया है।समस्या यह है कि मैं इस बात पर नियंत्रण नहीं कर रहा हूं कि क्लाइंट को क्या कार्यप्रणाली भेजी जाती है (कारणों से मैं यहां चर्चा नहीं कर सकता) इसलिए यह समाधान नहीं होगा, भले ही यह काम किया हो ... –

2 साल बाद और यह प्रश्न (और उत्तर) अभी भी अविश्वसनीय रूप से उपयोगी हैं! थोड़ी देर के लिए इसके खिलाफ मेरे सिर को तोड़ दिया। यह भी पता नहीं लगा कि प्रश्न को सही तरीके से कैसे शब्द दें ... धन्यवाद! –

यह IE के "hasLayout बग" से संबंधित है। अपेक्षाकृत तैनात #panel माता पिता लेआउट नहीं है और इसलिए आईई अपने बच्चों को फिर से बदलना/दोबारा बदलना भूल जाता है।

यदि आप overflow: hidden; को अपेक्षाकृत #panel माता-पिता को जोड़ते हैं तो समस्या बढ़ जाएगी।

#panel { position: relative; overflow: hidden; border: solid 1px black; }

इस आईई बग के बारे में गहराई पृष्ठभूमि जानकारी में उत्कृष्ट संदर्भ "On having layout" में पाया जा सकता है और फिर अपने विशेष समस्या विशेष रूप से अध्याय "Relatively positioned elements" के लिए:

ध्यान दें कि position: relative hasLayout, जो सुराग ट्रिगर नहीं करता कुछ प्रतिपादन त्रुटियों के लिए, ज्यादातर गायब या गलत स्थानांतरित सामग्री। पृष्ठ रीलोड, विंडो आकार और स्क्रॉलिंग, चयन करके असंगतताओं का सामना किया जा सकता है। इस प्रॉपर्टी के साथ, आईई तत्व, ऑफ़सेट करता है लेकिन लगता है कि इसके लेआउट बाल तत्व पर एक "रेड्रा" भेजना भूल गया है (क्योंकि एक लेआउट तत्व रेड्रो घटनाओं की सिग्नल श्रृंखला में सही ढंग से भेजा होगा)।

overflow संपत्ति तत्व से चलाता है, लेआउट भी अध्याय "Where Layout Comes From" देखने के लिए:

IE7 के रूप में, overflow एक लेआउट ट्रिगर बन गया।

स्रोत

2010-03-18 20:45:58 BalusC

आईईएस्टर में आईई 7 में पुष्टि नहीं कर सकता: पूरी चीज गायब हो जाती है। क्या आप वाकई यह सुनिश्चित कर रहे हैं? –

वह ए एम ए जेड एन एन जी है !!! धन्यवाद!!! मैं 2 दिनों के लिए इसके साथ संघर्ष कर रहा हूं और मुझे कोई जवाब नहीं मिला है। आपको बहुत - बहुत धन्यवाद! –

ओह ठीक है, ऐसा लगता है कि चाल चल रही है - शायद मुझे वांछित परिणाम गलत हो गया। –

यह समाधान जरूरी गतिशील सामग्री के साथ कोई लेना देना नहीं है, लेकिन यह मेरे लिए काम किया (कम से कम पेज एक प्रबंधनीय डिग्री करने के लिए borked बनाया): आयाम निर्दिष्ट करें। मैंने केवल आईई 7 को सोचा था कि आईई टूल्स में क्रैपी 'क्लिक एलिमेंट द्वारा क्लिक करें' टूल (ctrl + B) का उपयोग करते समय एक div की चौड़ाई नहीं थी।

स्रोत

2011-08-11 16:44:59

मुझे खुशी है कि यह काम करता है, लेकिन आपका उत्तर टिप्पणी के बजाय एक उत्तर के लिए अधिक उपयुक्त होगा। – webLacky3rdClass

मैंने रेड्रो ट्रिगर करने के लिए अपना फ़ंक्शन बनाया है। शायद यह सही समाधान नहीं है, लेकिन यह काम करता है।

// Script to fix js positon bug on IE7 

// Use that function, recomended delay: 700 
function ie7fixElementDelayed(elements, delay) { 
    window.setTimeout(
     function() { 
      if(navigator.appVersion.indexOf("MSIE 7.") != -1) { 
       ie7fixElement(elements); 
      } 
     }, 
     delay 
    ); 
} 

function ie7fixElement(elements) { 
    elements.each(function(i) { 
     var element = $(this); 
     var orginalDisplayValue = element.css("display"); 

     element.css("display", "none"); 
     element.css("display", orginalDisplayValue); 
    }); 
}

नमूना उपयोग:

ie7fixElementDelayed($('#HandPickedWidget .widget'), 700);

स्रोत

2013-07-16 14:03:26 MaciejLisCK

IE7 रिश्तेदार/गतिशील रूप से संशोधित पृष्ठ की सामग्री

उत्तर

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