2012-11-11 12 views
6

मैं इस साधारण HTML हैसेटिंग div अधिकतम ऊंचाई से काम नहीं करता

<html> 
<head> 
    <style> 
    </style> 
</head> 
<body> 
<div style="position: relative; overflow: visible; width: 100%; height: 100%;" class="surface"> 
    <div style="width: 300px; max-height: 2px; height: 2px; position: absolute; left: 36.165px; top: 0.8957px; border: 1px solid red;"></div> 
    <div style="width: 1px; height: 200px; position: absolute; left: 30.165px; top: 47.8957px; border: 1px solid red;"></div> 
</div> 
</body> 
</html> 

हैं मूल रूप से दो div रों: एक "क्षैतिज" (ऊंचाई 2px) और एक "ऊर्ध्वाधर" (ऊंचाई 2px)।

जब मैं फ़ायरफ़ॉक्स पर पृष्ठ को देखने के लिए: IE (8) कुछ पर

enter image description here

जबकि weired होता है:

enter image description here

शीर्ष DIV 2px उच्च नहीं है।

कोई विचार ऐसा क्यों है?

+0

यहाँ है ओवरराइड एक त्वरित [jsFiddle] (था http://jsfiddle.net/pqps5/1 /)। आईई 9 ठीक है। – kapa

+0

@ bažmegakapa मैंने अपने स्वयं को एक jsfiddle स्थापित करने की कोशिश की और यह आईई 8 में भी ठीक था, इसलिए मुझे प्रिंटरस्क्रीन क्यों बनाना पड़ा। क्या आप कृपया अपना कोड एक .html में डालने का प्रयास कर सकते हैं और देख सकते हैं कि क्या आपके आईई में यह विचित्र व्यवहार है? (jsfiddle का उपयोग नहीं)। –

+0

तो आईई 7 करता है ... शायद आपको केवल 'डिस्प्ले: ब्लॉक' – JFK

उत्तर

3

आपका संभव समाधान:

1) एक सरल समाधान doctype घोषणा जोड़ना है। अपनी शैली

2) में display: block जोड़ें। जांचें कि आपके पास उचित DOCTYPE है अन्यथा (आईई) क्विर्क मोड अप्रत्याशित प्रारूप और परिणाम देगा। Check this article for reference

1

मुझे संदेह है कि यह आईई क्विर्क मोड में कुछ "सहायक" सेटिंग्स जोड़ देगा जो एक कंटेनर की ऊंचाई को न्यूनतम टेक्स्ट ऊंचाई पर धक्का देगी। IE8 और कम (सशर्त टिप्पणियां, शायद?) के लिए line-height: 2px; सेट करने का प्रयास करें और इसे सॉर्ट करना चाहिए।

+0

हाँ लेकिन यह समझा नहीं गया कि मैं क्यों देख पा रहा था कि jsfiddle में लेकिन मेरे सादे HTML में नहीं, @Tyzoid समाधान मेरे सभी कोड –

3

आईई 7, 8 और 9 यहां ठीक काम करता है।

आपको वास्तव में max-height की आवश्यकता नहीं है, लेकिन display: block और/या line-height: 2px सेट करने के बजाय यह एक समाधान हो सकता है।

+0

हाँ के लिए लागू होता है लेकिन यह समझा नहीं जाता है कि मैं jsfiddle में क्यों देख पा रहा था लेकिन मेरे सादे HTML में नहीं, @Tyzoid समाधान मेरे सभी कोड के लिए लागू होता है –

4

आपकी समस्या यानी quirks mode मोड से उत्पन्न होती है।

ऐसा तब होता है जब कोई डॉक्टरेट घोषणा नहीं होती है। अधिकतम चीजें, अन्य चीजों के साथ (बॉक्स मॉडल समेत) कार्य करती है जैसे कि यह यानी 5 थी।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
+1

धन्यवाद आदमी, उसने ऐसा किया! –

+0

@jidma: ठीक है, मैंने आपको बताया था – JFK

0

मेरे मामले में एक

मिनट ऊंचाई

की स्थापना है कि अन्य सेटिंग्स

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