एक स्व-समापन टैग का उपयोग करने से इस स्थिति में इतना प्रमुख और विचित्र प्रभाव क्यों होता है?

Question

संभव डुप्लिकेट:
Can a span be closed using <span />?

<p>This is a test <span id='span1' style='display:inline-block;'></span> to see if I can embed an inline block.</p> 

<p>This is a test <span id='span2' style='display:inline-block;'/> to see if I can embed an inline block.</p>​ 

http://jsfiddle.net/T7ByE/

पहली पंक्ति, एक नियमित रूप से बंद होने वाले टैग के साथ एक अवधि एम्बेड करता है, जबकि दूसरा एक स्वतः बंद होने वाले टैग का उपयोग करता। पहली पंक्ति ठीक से काम करती है, जबकि दूसरे का विचित्र परिणाम होता है।

मैं सिर्फ उत्सुक हूं कि प्रत्येक मामले में तत्व के संचालन में इतना अंतर क्यों है। मुझे पता है कि गैर-सख्त xhtml के तहत, स्वयं-बंद टैग बहुत अच्छी तरह से समर्थित नहीं हैं। ऐसा लगता है कि स्व-समापन टैग को सिर्फ एक खुले टैग के रूप में माना जा रहा है।

क्या कोई अच्छा कारण है कि आधुनिक ब्राउज़र अभी भी स्वयं-बंद HTML टैग का समर्थन नहीं करते हैं? क्या मुझे यह काम करने के लिए डॉक्टरेट या कुछ बदलने की उम्मीद है?

विडंबना वास्तव में एक स्पष्ट समापन टैग के साथ शुरू हुई है, लेकिन इसे ब्राउज़र के एक्सएमएल पार्सर के माध्यम से चलाया गया और एचटीएमएल पर वापस चला गया, और पार्सर को खाली तत्व को एक स्व-समापन टैग में ध्वस्त करने जैसा महसूस हुआ, जिसने तुरंत सब कुछ तोड़ दिया ।

Answer 1

वेब-ब्राउज़र में डोम इंस्पेक्टर हैं जो हमें परिणामी डीओएम पेड़ की संरचना दिखाते हैं। उदाहरण के लिए, Firebug में के लिए:

आप देख सकते हैं, फ़ायरफ़ॉक्स स्वतः बंद होने वाले टैग को नहीं पहचानता है, लेकिन एक स्टार्ट टैग के बजाय की तरह व्यवहार करता है। जब पैराग्राफ के अंत तक पहुंच जाता है तो फ़ायरफ़ॉक्स स्वचालित रूप से उस SPAN तत्व को बंद कर देगा, जिसका अर्थ है कि स्पैन में अनुच्छेद का शेष पाठ होगा।

अब, चूंकि आप स्पैन तत्व में एक डीआईवी तत्व डाल रहे हैं, इसलिए डीआईवी उस स्पैन तत्व की टेक्स्ट-सामग्री के नीचे रखी जाएगी। ऐसा इसलिए है क्योंकि डीआईवी तत्व एक ब्लॉक-स्तर तत्व है। टेक्स्ट-सामग्री के बाद दिखाई देने वाले ब्लॉक-स्तरीय तत्व, उस टेक्स्ट-सामग्री के नीचे रखे गए हैं।

Answer 2

जब आप स्वयं को स्पैन जैसे टैग संलग्न करते हैं, जहां तक ​​मैं कल्पना कर सकता हूं ***, आप वास्तव में स्वयं को संलग्न नहीं कर रहे हैं - उन टैगों में यह क्षमता नहीं है। आप वास्तव में क्या कर रहे हैं इसे खोलना छोड़ रहा है। और जब आप सामान खोलते हैं, ब्राउज़र एक स्वतंत्रता लेता है, और आमतौर पर, अपने माता-पिता के समापन टैग के अंत में, उन्हें बंद कर देता है।

तो आपके उदाहरण में, एनसी 2 के मामले में, आपको एक इनलाइन-ब्लॉक मिलता है जो पी तत्व के अंत तक सभी तरह से जाता है। अब, उस इनलाइन-ब्लॉक के अंदर आप ब्लॉक स्तर तत्व जोड़ रहे हैं। खैर, इस बार और फिर ... एक इनलाइन (इनलाइन-ब्लॉक) के अंदर एक ब्लॉक डालकर ब्राउज़र अपनी स्वतंत्रता में से एक लेता है और (मूल रूप से) ब्लॉक तत्व के आस-पास की सभी सामग्री को ब्लॉक ब्लॉक तत्वों में रखता है क्योंकि इसकी आवश्यकता होती है करने के लिए (वह 1 या दो है - और नहीं)।

आपके मामले में आपको डाले गए div ("यह देखने के लिए कि क्या मैं इनलाइन-ब्लॉक एम्बेड कर सकता हूं) से पहले के पाठ के चारों ओर एक" अज्ञात "ब्लॉक प्राप्त करता हूं।

चूंकि ब्लॉक लंबवत रूप से ढेर होते हैं, तो यह कोई आश्चर्य की बात नहीं है, फिर, आपको दूसरे पैराग्राफ पर दिखाई देने वाली उपस्थिति है।

यहां पर एक रंगीन पहेली देखें: jsfiddle।इसे बेहतर देखने के लिए नेट/टी 7 बीईई/1/(क्लिक करने योग्य नहीं)।

प्रासंगिक लिंक
display:block inside display:inline

*** यह kind'a seems कि आपकी सामग्री प्रकार फैला के आधार पर वास्तव में हो सकता है आत्म संलग्न *

Answer 3

इसका कोई खास कारण अभी भी आधुनिक ब्राउज़रों है स्वयं बंद एचटीएमएल टैग का समर्थन नहीं करते हैं?

पिछड़ा संगतता।

क्या मुझे काम करने के लिए डक्ट टाइप या कुछ बदलने की उम्मीद है?

आप XML का उपयोग करना चाहते हैं, तो आप send your document as XML करने की जरूरत है (application/xhtml+xml, विशिष्ट होना)। यह मुख्य रूप से एमआईएमई प्रकार के साथ करना है, न कि कार्यप्रणाली। बेशक, no way to make it work in IE <9 है।