एचटीएमएल 5 वर्टिकल स्पेसिंग इश्यू <img>

Question

मैं एक लेआउट बनाने की कोशिश कर रहा हूं जहां divs के बीच लंबवत रिक्ति पिक्सेल सही है। अब तक मैंने लगभग सभी बड़े ग्रिड सिस्टम (960.gs, ब्लूप्रिंट) से इंकार कर दिया है, क्योंकि उनके पास ऊर्ध्वाधर स्पैसिंग के लिए कोई समाधान नहीं है। उनके साथ, divs के बीच लंबवत रिक्ति सेट करने का एकमात्र तरीका शरीर {लाइन-ऊंचाई} विशेषता का उपयोग करना और इसका उपयोग करके div spacing में हेरफेर करना है। मैं इसे एक समाधान नहीं कहूंगा, क्योंकि यह आपके टेम्पलेट को बर्बाद कर देता है, फ़ॉन्ट-फ़ैमिली पर निर्भर करता है, और आपको अलग-अलग divs के लिए अलग-अलग spacings का उपयोग करने नहीं देता है।

एकमात्र ग्रिड सिस्टम जो मैंने पाया है जिसमें लंबवत रिक्ति के लिए उचित समर्थन है Golden Grid है, जो शरीर {लाइन-ऊंचाई} का उपयोग नहीं करता है, लेकिन यह लंबवत {ऊंचाई: 5px} लंबवत रिक्ति के लिए है।

मेरी समस्या यह है कि कोई फर्क नहीं पड़ता कि मैं कैसे कोशिश करता हूं, मैं एचटीएमएल 5 में अंतर नहीं कर सका। मैं उनके बीच अंतर के बिना ऊर्ध्वाधर व्यवस्थित छवियों के बारे में बात कर रहा हूं। एक्सएचटीएमएल संक्रमणकालीन मोड में, सबकुछ काम करता है, छवियां पूरी तरह से संरेखित होती हैं, लेकिन जब एचटीएमएल 5 मोड में, उनके बीच एक लंबवत अंतर होता है। क्रोम में अंतर 2px और फ़ायरफ़ॉक्स में 2-3 पीएक्स, लाइनों के बीच वैकल्पिक है। मुझे लगता है कि एचटीएमएल 5 मोड में इस्तेमाल होने पर हर ग्रिड सिस्टम के साथ यह मामला है। मुझे नहीं पता कि इस कोड को सादे एचटीएमएल 5 में लिखने का सबसे अच्छा तरीका क्या है, इसलिए मैंने ग्रिड सिस्टम की कोशिश की। ऊर्ध्वाधर अंतर 960.gs में भी मौजूद है, ब्लूप्रिंट भी।

मुझे पता चला एक समाधान शरीर {लाइन-ऊंचाई: 0} सेट करने और प्रत्येक एकल टाइपोग्राफ़िक टैग में रेखा-ऊंचाई को परिभाषित करने के लिए हो सकता है। लेकिन मुझे समझ में नहीं आता कि इस तरह के एक साधारण मामले के लिए इतना बुरा हैक क्यों आवश्यक होगा: लंबवत व्यवस्थित छवियां। एक्सएचटीएमएल संक्रमणकालीन मोड की तुलना में ब्राउज़र एचटीएमएल 5 मोड में अलग क्यों हैं?

यहां, मेरे पास एक ही पृष्ठ है, कुछ भी नहीं बदला है, केवल डॉक्टरेट है। एक्सएचटीएमएल एक प्रत्येक ब्राउज़र में पिक्सेल सही है, एचटीएमएल 5 में अंतर है और ब्राउज़र से ब्राउजर से अलग है।

एचटीएमएल 5 उदाहरण को एक्सएचटीएमएल संक्रमणकालीन काम करने का सबसे अच्छा तरीका क्या है?

अद्यतन: तीसरे स्थान में समस्या का उत्तर दिया गया, अगर मैं img {display: block; } एचटीएमएल 5 संस्करण बिल्कुल एक्सएचटीएमएल संक्रमण के समान व्यवहार करता है। धन्यवाद तीसरा धन्यवाद!

लेकिन यह धागा बंद करने से पहले, किसी ने मुझे समझा सकता है क्यों यह है कि है:

• क्यों सभी ब्राउज़रों एचटीएमएल 5 मोड में अलग तरह से व्यवहार करते हैं और सभी img तत्वों, के बीच विभिन्न ऊर्ध्वाधर अंतराल जब प्रदर्शन के रूप में निर्दिष्ट नहीं किया है ब्लॉक उपरोक्त एचटीएमएल 5 लिंक के लिए ब्राउज़र तुलना करने वाली साइट में एक नज़र डालें, यह ब्राउज़र से ब्राउज़र से अलग होगा। उनके पास 2 से 4 पीएक्स के बीच अंतराल है।
• क्यों एक्सएचटीएमएल संक्रमणकालीन इस हैक
• क्यों एक्सएचटीएमएल सख्त एक ऊर्ध्वाधर खाई पैदा करता भी
• इसे सुरक्षित img उपयोग करने के लिए है की जरूरत नहीं है {प्रदर्शन: ब्लॉक; } एक reset.css शीट में?

Answer 1

सभी ब्राउज़र एचटीएमएल 5 मोड में अलग-अलग व्यवहार क्यों करते हैं और सभी के पास आईएमजी तत्वों के बीच अलग-अलग लंबवत अंतराल होते हैं, जब प्रदर्शन के रूप में निर्दिष्ट नहीं किया जाता है: ब्लॉक?

सबसे पहले, ब्राउज़र में "HTML5 मोड" नहीं है। उनके पास तीन मोड "क्विर्क", "सीमित क्विर्क" (उर्फ लगभग मानक) और "मानक" मोड हैं। "सीमित क्विर्क" और "मानक" मोड के बीच केवल एक अंतर है और यह उस तरीके से संबंधित है जिसमें लाइन बॉक्स के लिए लाइन-ऊंचाई और बेसलाइन स्थापित की गई है, जिसमें <img> बैठता है। "सीमित क्विर्क" मोड में, यदि लाइन पर कोई प्रस्तुत टेक्स्ट सामग्री नहीं है, तो कोई बेसलाइन स्थापित नहीं की गई है और <img> लाइन बॉक्स के नीचे स्थित है।

"मानकों" मोड में, लाइन बॉक्स में बेसलाइन के नीचे जी, पी और वाई जैसे वर्णों के वंशजों के लिए हमेशा जगह होती है, भले ही उस रेखा बॉक्स में कोई वास्तविक वर्ण न हों। आप जो अंतर देखते हैं वह है आधार रेखा के बीच की दूरी और लाइन बॉक्स के नीचे जो कि उन वंशजों के लिए जगह है। एक संपूर्ण विवरण के लिए, http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

उपाय देखते हैं, तो या तो <img> एक इनलाइन तत्व { display:block; } के रूप में इलाज किया जा रहा रोकने के लिए या <img>{ vertical-align:bottom; } के ऊर्ध्वाधर संरेखण ओवरराइड करने के लिए है। या तो काम करेगा।

एक्सएचटीएमएल संक्रमणकालीन इस एक्सएचटीएमएल संक्रमणकालीन doctype का प्रयोग हैक

की जरूरत नहीं क्यों "सीमित क्वर्क्स" मोड में ब्राउज़र देता है। यदि आपने एक्सएचटीएमएल सख्त, या एक पूर्ण एचटीएमएल 4 सख्त डॉक्ट टाइप का इस्तेमाल किया था, तो आप एचटीएमएल 5 ड्यूट टाइप के साथ एक ही अंतराल को देख चुके होंगे क्योंकि इनमें से प्रत्येक ब्राउज़र को "मानक" मोड में रखता है।

क्यों एक्सएचटीएमएल सख्त उत्पादन एक ऊर्ध्वाधर अंतराल भी

ऊपर देखें करता है।

क्या यह img {display: block; } एक reset.css शीट में?

बेशक, लेकिन शायद ऐसे समय होंगे जब आप <img> को इनलाइन तत्व के रूप में माना जाएगा। उन मामलों में, आपको इसे प्राप्त करने के लिए उपयुक्त स्थानों में सीएसएस जोड़ना होगा।

Answer 2

मुझे लगता है कि यह वह उत्तर नहीं हो सकता है जिसे आप ढूंढ रहे हैं। यह बहुत छोटा है:

अपने HTML5 पृष्ठ के सीएसएस में जोड़ें: img { display: block }।

फ़ायरफ़ॉक्स और क्रोम में परीक्षण, ऐसा करने से आपके दो पृष्ठों के बीच पिक्सेल सही समान प्रतिपादन हो जाता है।

Answer 3

इस कोड का प्रयास करें:

<html> 
<head> 
<style> 
div, span { border:1px dotted; height:100px; width:100px; } 
</style> 
</head> 
<body> 
    <span>100px</span> 
    <div>100px</div> 
</body> 
</html> 

जब आप विचार है कि <img><span> की तरह एक इनलाइन तत्व है ... मुझे लगता है कि अपने सवालों के अधिकांश उत्तर दिया जाता है।

चौड़ाई/ऊंचाई विशेषताओं के बिना, प्रत्येक ब्राउजर प्रतिपादन इंजन पर निर्भर होने पर आपका निर्भर (वे नहीं हैं)। तो जब तक आप ब्राउज़र को बताते हैं कि कितने पिक्सल का उपयोग करना है, तब तक पिक्सेल सही काम नहीं करेगा।

Answer 4

vertical-align: baseline आपकी छवियों के नीचे अंतर को जन्म दे रहा है।

सख्त सिद्धांतों में, छवियां इनलाइन तत्व हैं और पाठ की तरह व्यवहार करती हैं।बेसलाइन पर इनलाइन तत्वों को संरेखित करने से उन्हें टेक्स्ट अवरोधकों के लिए कमरे छोड़ने का कारण बनता है, भले ही कोई टेक्स्ट न हो।

आपकी रीसेट स्टाइलशीट में img { vertical-align: bottom } जोड़ना समस्या को ठीक करेगा।