आईई 7 में एक div के लिए न्यूनतम ऊंचाई कैसे सेट करूं?

Question

मुझे एक div की न्यूनतम ऊंचाई निर्धारित करने की आवश्यकता है। फ़ायरफ़ॉक्स में सब कुछ अच्छा है, लेकिन मुझे आईई 7 के साथ परेशानी हो रही है - एक अनपेक्षित बड़ी जगह।

ul, il { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
} 

    .p_block{ 
     color: #336699; 
     font-size: 14px; 
     min-height: 18px; 
    } 

<ul> 
    <li><a href="#"><div class="p_block">text</div></a></li> 
    <li><a href="#"><div class="p_block">text</div></a></li> 
    <li><a href="#"><div class="p_block">text</div></a></li> 
    <li><a href="#"><div class="p_block">text</div></a></li> 
</ul> 

अजीब, अगर मैं ul, li से padding: 0px; हटाते हैं, तो सब कुछ ठीक काम करता है। क्यूं कर?

Answer 1

उपयोग आईई & एफएफ

.p_block{ 
     color: #336699; 
     font-size: 14px; 
     min-height: 18px; 
     height:18px !important; 
    } 

Answer 2

@Chinmayee के लिए इस सीएसएस, कि समाधान के साथ समस्या यह है कि तत्व की ऊंचाई फ़ायरफ़ॉक्स और कुछ अन्य लोगों में पिछले 18px विकसित करने के लिए सक्षम नहीं होगा है।

एक अच्छा पार ब्राउज़र समाधान मिन-ऊंचाई के लिए:

{ 
height: auto !important; 
height: 200px; 
min-height: 200px; 
} 

मूल रूप से;
रेखा # 1: अधिकांश आधुनिक ब्राउज़र समझते हैं! महत्वपूर्ण, इसलिए अगली पंक्ति में संपत्ति को ओवरराइट नहीं करेगा।

रेखा # 2: क्योंकि पुराने ब्राउज़र नहीं जानते! महत्वपूर्ण, यह एक सेट ऊंचाई होना चाहिए। पुराने ब्राउज़र तब तक बढ़ने की अनुमति देंगे जब तक कोई ओवरफ़्लो न हो: संपत्ति सेट।

रेखा # 3: आधुनिक ब्राउज़र न्यूनतम और समझते हैं। तो आधुनिक ब्राउज़र ऊंचाई समझते हैं: ऑटो और न्यूनतम ऊंचाई: 200 पीएक्स, जबकि पुराने ब्राउज़र ऊंचाई समझते हैं: 200px; लेकिन तत्व विकसित करने के लिए अनुमति देगा;)

Answer 3

यहाँ एक समाधान है कि मैं पसंद है:

.p_block{ 
     color: #336699; 
     font-size: 14px; 
     min-height: 18px; 
} 

तो आईई इस का उपयोग करने के लिए:

.p_block{ 
     height: 18px; 
} 

आईई मिनट-ऊंचाई के रूप में ऊंचाई से व्यवहार करता है तो यह होगा बढ़ता है।

आप auto height और महत्वपूर्ण बाहर के रूप में नीचे दिखाया गया है एक विशिष्ट IE6 & 7 सीएसएस फ़ाइल शामिल करके आईई लक्षित कर सकते हैं (< सिर में चला जाता है>)

<!--[if IE 6]> 
     <link rel="stylesheet" type="text/css" href="css/ie6-hacks.css" /> 
     <script type="text/javascript"> 
      // IE6 Background Hover Flicker Fix 
      try { 
       document.execCommand('BackgroundImageCache',false,true); 
       }catch(ignoreme){ 
      } 
     </script> 
    <![endif]--> 
    <!--[if IE 7]> 
     <link rel="stylesheet" type="text/css" href="css/ie7-hacks.css" /> 
    <![endif]--> 

Answer 4

मिस और height से पहले * जोड़ें।

यह तब केवल आईई 7 और नीचे लागू होगा।

.p_block{ 
    min-height: 30px; 
    *height: 30px; 
} 

यह मैं क्या उपयोग किया जाता है, IE7 min-height का उपयोग नहीं होगा लेकिन 30px को height सेट हो जाएगा और यदि आवश्यक हो तो बड़ा जाना होगा।