सीएसएस डिबगिंग सहायता - खाली div collapsing

Question

निम्न HTML एएसपीएक्स पेज से है। यह पहले बच्चे डीआईवी तत्व के संबंध में है। आईई 7 में एचटीएमएल प्रस्तुत करता है क्योंकि मैं उस डीवी तत्व खाली होने पर भी अपेक्षा करता हूं। यह अपने माता-पिता की चौड़ाई लगभग 1/3 होनी चाहिए, लेकिन फ़ायरफ़ॉक्स में यह शून्य चौड़ाई तक गिर रहा है। सभी 3 divs बाईं ओर तैरते हैं। वैसे भी, मेरा सवाल यह है कि मैं कम से कम फ़ायरफ़ॉक्स में 32% पर खाली DIV की चौड़ाई कैसे रखूं, और अधिमानतः सफारी, ओपेरा और क्रोम। मुझे आशा है कि फिक्स सभी ब्राउज़रों में समस्या को सही करेगा। इसमें कोई संदेह नहीं है कि आईई 7 की संभावित ग़लत प्रतिपादन के साथ संयुक्त रूप से सीएसएस ज्ञान की कमी है। यह शायद सही ढंग से व्यवहार कर रहा है। क्या कोई मुझे इस समस्या को ठीक करने में मदद कर सकता है?

<div style="padding-left: 4px ! important; overflow: auto; width: 96% ! important;" class="fullwidthdiv"> 

      <div style="width: 32% ! important;" class="oneThirdColumn"></div> 

      <div style="width: 32% ! important;" class="oneThirdColumn"> 
      $<input type="text" style="width: 70px;" class="underlinedTextBox updateReserveAmount" tabindex="123" id="ctl00_DefaultContent_payment1_paymentfrmView_updateReserveAmount" maxlength="11" name="ctl00$DefaultContent$payment1$paymentfrmView$updateReserveAmount"> 
      </div> 
      <div style="width: 32% ! important;" class="oneThirdColumn"> 
      <input type="submit" style="width: 120px;" class="updateReserve" tabindex="124" id="ctl00_DefaultContent_payment1_paymentfrmView_btnReserve" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$DefaultContent$payment1$paymentfrmView$btnReserve&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" value="Update Reserve" name="ctl00$DefaultContent$payment1$paymentfrmView$btnReserve"> 
      </div> 
    </div> 

Answer 1

यह चौड़ाई नहीं है जो समस्या है, यह ऊंचाई है।

यदि आपके पास div में कोई सामग्री नहीं है, तो ऊंचाई शून्य हो जाती है। हालांकि, आईई में एक प्रसिद्ध बग है, जहां यह कम से कम एक चरित्र को सभी तत्वों की सामग्री बनाता है।

आप div के लिए ऊंचाई निर्दिष्ट कर सकते हैं, या आप इसमें   डाल सकते हैं जब आपके पास वहां रखने के लिए और कुछ नहीं है।

Answer 2

मुझे संदेह है कि यह फ्लोट की वजह से है। क्या आप उन्हें तैरने के बजाय display: inline-block बना सकते हैं? लेकिन इससे शायद आईई नाखुश हो जाएगा, यह आपको ब्लॉक तत्वों को इनलाइन करना पसंद नहीं करता है। शायद span एस display: inline-block के बजाय हैं?

Answer 3

मैं जानता हूँ कि यह एक छोटे से पुराना है, लेकिन क्या मैंने किया था इस तरह की एक न्यूनतम-ऊंचाई शैली को जोड़ने था:

.oneThirdColumn { 
    min-height: 1em; 
} 

Answer 4

मैं padding-top: (insert number)px or % का उपयोग कर अपने पतन को मेरी खाली तत्वों रखने के लिए। ठीक काम करने लगता है।

Answer 5

मुझे फ़ायरफ़ॉक्स (कम से कम 47.0.2 और 50) में <span> के साथ एक ही समस्या थी।

निम्नलिखित सीएसएस के साथ फिक्स्ड: span:empty:before {content: '\a0';}।

जोड़ना होगा कि एक &nbsp;<span> से पहले सामग्री अगर खाली केवल और तत्वों कुछ पाठ या बच्चे हैं कि के लेआउट को प्रभावित नहीं करेगा।