IE8 - मार्जिन टॉप के साथ कंटेनर: 10px कोई मार्जिन

Question

संपादित है: यह केवल IE8 में होता है, यह IE7, फ़ायरफ़ॉक्स, ओपेरा आदि

सबसे पहले में ठीक काम करता है, यहाँ एक तस्वीर मैं में फ़ोटोशॉप बना दिया है मेरी समस्या का प्रदर्शन करने के लिए: http://richardknop.com/pict.jpg

अब आपको मेरे मुद्दे के बारे में विचार होना चाहिए। यहाँ मार्कअप मैं उपयोग कर रहा हूँ का एक सरलीकृत संस्करण (मैं सबसे अप्रासंगिक सामग्री बाहर छोड़कर चला गया):

<div class="left"> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
</div> 
<div class="right"> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
</div> 
<div class="clear"></div> 
<div class="box"> 
    // 
    // NOW THIS BOX HAS NO TOP MARGIN 
    // 
</div> 
<div class="box"> 
    // box content 
</div> 

और सीएसएस शैलियों इस तरह जाना:

.clear { 
    clear: both; 
} 
.left { 
    float: left; 
} 
.right { 
    float: right; 
} 
.box { 
    overflow: auto; 
    margin-top: 10px; 
} 

जाहिर है मैं सभी irreevant शैलियों की तरह बाहर छोड़ दिया है सीमाओं, पृष्ठभूमि रंगों और छवियों, फ़ॉन्ट आकार आदि। मैंने केवल महत्वपूर्ण चीजें रखी हैं।

कोई विचार जहां समस्या हो सकती है?

Answer 1

देखें कि padding-top: 10px काम करता है या नहीं। यह हो सकता है कि मार्जिन पृष्ठ के शीर्ष से जाने का प्रयास कर रहा है।

Answer 2

अपना स्पष्ट div बंद करने का प्रयास करें।

<div class="clear"></div> 

Answer 3

मैं काफी इस दृष्टिकोण नहीं मिलता है। आप कक्षा के साथ <div> एस को दाएं और <div> में छोड़कर overflow: hidden, width: 100% पर लागू कर सकते हैं ताकि नीचे दिए गए तत्वों को नीचे से प्रदर्शित किया जा सके।

Answer 4

enter code here अतिप्रवाह वाले चौड़ाई वाले कंटेनर का उपयोग करने का प्रयास करें: फ़्लोटेड divs के चारों ओर छिपा हुआ है, और साफ़ div को हटा दें।

<div id="container"> 
     <div class="left">  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div> 
     </div> 
     <div class="right">  
      <div class="box">  // box content right </div>  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div> 
     </div> 
    </div> 
    <div class="box"> // // NOW THIS BOX HAS NO TOP MARGIN //</div> 
<div class="box"> // box content</div> 

और सीएसएस

#container { width: 100%; overflow: hidden; } 

(माफ करना, मैं IE7 मेरे काम मशीन पर परीक्षण के लिए तो मैं पुष्टि नहीं कर सकते छोड़ दिया)

Answer 5

मुझे लगता है कि यह एक IE8 बग है। एक फ्लोट बाएं और दाएं div के एक भाई तत्व से संबंधित है। समाशोधन div के साथ या बिना, अंतिम unfloated तत्व आईई 8 में अपने शीर्ष मार्जिन खो देता है।

हम इस परीक्षण किया है, और केवल IE8 यह गलत हो जाता है:

http://www.inventpartners.com/content/ie8_margin_top_bug

हम भी 3 समाधान के साथ आया था।

Answer 6

मेरे पास आईई 8 नहीं है ... लेकिन क्या आपने स्पष्ट जोड़ने की कोशिश की: दोनों नीचे div में और शीर्ष फ्लोट में से एक को नीचे मार्जिन जोड़ना? मुझे पूरा यकीन है कि बिना किसी अतिरिक्त divs के एक ही प्रभाव प्राप्त होगा।

Answer 7

मुझे ऐसी ही समस्याएं हैं, और मैट ब्रैडली द्वारा प्रदान किए गए समाधान मेरे लिए काम नहीं करते थे (लेकिन इसे पोस्ट करने के लिए धन्यवाद!)। मैं मार्जिन टॉप होना चाहता था: एच 1 तत्व पर 10 पीएक्स।

जिस समाधान के साथ मैं आया था वह स्थिति जोड़कर था: सापेक्ष, शीर्ष: 10 पीएक्स और मार्जिन-टॉप: 0 पीएक्स एच 1 तत्व में।