एचटीएमएल 4.01 संक्रमणकालीन doctype ब्राउज़रों में लगभग मानक मोड का कारण बनता है:
यहाँ वैकल्पिक हल का एक उदाहरण है। एचटीएमएल 5 डॉक्टरेट मानक मोड का कारण बनता है।
यह माइक्रोसॉफ्ट आलेख अंतर बताता है: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29।
इसमें कहा गया है कि लगभग मानक मोड के लिए:
इनलाइन तत्वों ऊंचाई लाइन यदि और केवल यदि निम्न से कोई एक सही योगदान करते हैं।
तत्व हैं:
नोट अन्य कि एक लाइन ब्रेक इस परिभाषा के लिए एक पाठ चरित्र जब तक यह की केवल सामग्री है नहीं माना जाता है करने के लिए सेट ऊर्ध्वाधर- align गया है एक लाइन बॉक्स उस स्थिति में, निर्दिष्ट बॉक्स लाइन ऊंचाई के बावजूद लाइन बॉक्स की ऊंचाई ऊपर की ओर इनलाइन बॉक्स टॉप और लाइन पर निम्नतम इनलाइन बॉक्स नीचे बनी हुई है।
यदि कोई आईएमजी तत्व तालिका कक्ष की एकमात्र सामग्री है, तो लाइन बॉक्स सेल लाइन बॉक्स ऊंचाई की ऊंचाई शून्य पर समायोजित की जाती है।
अधिकांश अपने मामले में गंभीर रूप से, इसका मतलब है कि चित्र वाली लाइन की ऊंचाई की गणना strut, एक काल्पनिक इनलाइन तत्व यह है कि के line-height मूल्य के लिए लाइन ऊंचाई वृद्धि करनी चाहिए शामिल नहीं है h1 तत्व।
यह jsfiddle अकड़ के लिए में खड़े असली पाठ सामग्री के रूप में एक के साथ एक वास्तविक span तत्व से पता चलता है, और आप देख सकते हैं कि लेआउट दोनों एक एचटीएमएल 4.01 संक्रमणकालीन doctype और एक HTML5 doctype के साथ एक ही है।
यह jsfiddle केवल इस बार अकड़ सीएसएस का उपयोग कर निर्मित है, इस तरह एक ही विचार पता चलता है,:
h1:before {
content: '\A0';
}
खुर्रम के जवाब के मामले में, वह क्या कर रहा है की line-height को कम करने है h1 और इसलिए, मानक मोड में, स्ट्रैट की ऊंचाई छवि की ऊंचाई से कम होने के लिए। इसका मतलब है कि पूरी तरह से रेखा की ऊंचाई छवि की ऊंचाई से निर्धारित होती है, न कि स्ट्रैट की ऊंचाई। छवि की ऊंचाई दोनों मानकों और लगभग मानकों मोड में समान है, फिर भी, आप मोड के बीच प्रतिपादन में कोई अंतर नहीं देखते हैं।
छवि की ऊंचाई (25px) से मेल खाने के लिए h1 की लाइन-ऊंचाई को सेट करने के लिए क्यों काम नहीं करता है, लेकिन इसे 12px पर सेट करता है, ऐसा इसलिए है क्योंकि स्ट्रैट न केवल शीर्ष और नीचे स्थापित करता है, लेकिन लाइन के लिए एक आधार रेखा भी। सामान्य आकार टेक्स्ट के लिए आमतौर पर लगभग 3px के लिए, पाठ अवरोधकों को अनुमति देने के लिए बेसलाइन नीचे से थोड़ा ऊपर है। डिफ़ॉल्ट रूप से छवि बेसलाइन पर बैठती है ताकि लाइन की ऊंचाई स्थापित करने के लिए बेसलाइन और नीचे के बीच का अंतर छवि की ऊंचाई में जोड़ा जा सके।
का उपयोग करके छवि को बेसलाइन से स्थानांतरित करके हल किया जा सकता है, जो इस jsfiddle में दिखाया गया है।यदि आप यहां एच 1 लाइन-ऊंचाई के साथ टिंकर करते हैं, तो आप देखेंगे कि 25px से अधिक मान लाइनों के बीच की दूरी को बढ़ाते हैं, लेकिन 25px या उससे कम के मान उस अंतर को नहीं बदलते हैं।
महान उत्तर, अच्छी तरह से शोध किया गया, और समस्या की जड़ को संबोधित करता है। – ForOhFor
मैंने छवि के सीएसएस को "डिस्प्ले: ब्लॉक;" पर सेट करके हल किया है ... हालांकि अन्य संदर्भों में यह व्यवहार्य नहीं हो सकता है। – KnF