क्रॉस-ब्राउज़र इनलाइन-ब्लॉक

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



इनलाइन-ब्लॉक , प्रदर्शन संपत्ति के लिए एक आकर्षक मूल्य, जो बहुत वादा करता है और बहुत कम करता है। बहुत बार, मुझे इस तरह PSD फाइलें मिलीं:


और रोया।

आमतौर पर, यह प्रदर्शन विधि समस्याओं का कारण नहीं बनती है। निश्चित चौड़ाई, निश्चित ऊंचाई, फ्लोट: बाएं और किया हुआ। यदि एक के लिए नहीं, लेकिन! किसी भी राशि की सामग्री के साथ डिजाइन सही ढंग से प्रदर्शित होना चाहिए। हमारे मामले में, यदि किसी ब्लॉक में थोड़ा अधिक डेटा है, तो यह पूरे ग्रिड को "तोड़" देगा।



चूंकि पहला तत्व निम्न से अधिक है, इसलिए पांचवां हिस्सा उसके अधीन नहीं है, जैसा कि हम चाहेंगे, लेकिन दाहिने किनारे के साथ "प्रवाह" होता है। सामान्य तौर पर, हमें टेबल लोच की आवश्यकता होती है, लेकिन सही, अर्थ लेआउट में।

आइए एक सरल उदाहरण से शुरू करें जहां सूची आइटम में प्रदर्शन संपत्ति इनलाइन-ब्लॉक पर सेट है:

<ul> <li> <h4>This is awesome</h4> <img src="1450821541436477177797" alt="lobster" width="75" height="75"/> </li> ... <ul> <style> li { width: 200px; min-height: 250px; border: 1px solid #000; display: inline-block; margin: 5px; } </style> 

परिणाम फ़ायरफ़ॉक्स 3, सफारी 3 और ओपेरा में सही दिखता है:



ऐसा लगता है कि ऊर्ध्वाधर संरेखण के साथ कुछ गलत है। आपको सच बताने के लिए, कोई त्रुटि नहीं है, यह ब्राउज़र का सिर्फ सही व्यवहार है, लेकिन हम जो परिणाम चाहते हैं, वह बिल्कुल नहीं है।

और निम्नलिखित यहाँ होता है, प्रत्येक <li> तत्व की आधार रेखा को मूल <ul> तत्व की आधार रेखा के साथ संरेखित किया जाता है। आप पूछते हैं, आधार रेखा क्या है? सौ बार सुनने की अपेक्षा एक बार देखना बेहतर:



ऊपर की आकृति में आधार रेखा पात्रों के आधार के माध्यम से एक रेखा द्वारा इंगित की गई है। इनलाइन और इनलाइन-ब्लॉक तत्वों की ऊर्ध्वाधर-संरेखित संपत्ति के लिए डिफ़ॉल्ट मान आधारभूत है । इसका मतलब यह है कि तत्वों की आधार रेखा माता-पिता की आधार रेखा के साथ संरेखित होती है। नीचे दिया गया आंकड़ा ऐसे संरेखण का उदाहरण दिखाता है:



जैसा कि आप देख सकते हैं, ऊपर की आकृति के ब्लॉक की प्रत्येक आधार रेखा को "यह आधार रेखा है" पाठ की आधार रेखा के साथ संरेखित किया गया है, जो <li> तत्व नहीं है। यह सिर्फ एक टेक्स्ट नोड है जो सीधे <ul> में स्थित है, जिसे <ul> तत्व के आधार रेखा के स्थान के एक संकेतक के रूप में रखा गया है।

संरेखण विकल्प को आप शुरू में प्राप्त करना काफी सरल है, बस ऊर्ध्वाधर-संरेखित संपत्ति के लिए शीर्ष मूल्य निर्धारित करें और परिणामस्वरूप एक उत्कृष्ट ग्रिड प्राप्त करें :



लेकिन यह फ़ायरफ़ॉक्स 2, IE 6 और 7 में काम नहीं करता है:



आइए फ़ायरफ़ॉक्स 2 के साथ शुरुआत करें।

फ़ायरफ़ॉक्स 2 इनलाइन-ब्लॉक मूल्य का समर्थन नहीं करता है, लेकिन यह मोज़िला को समझता है - प्रदर्शन संपत्ति के लिए विशिष्ट मूल्य -मोज़-इनलाइन-स्टैक । यह इनलाइन-ब्लॉक कार्रवाई के समान परिणाम उत्पन्न करता है। जब हम इसे प्रदर्शन से पहले जोड़ते हैं: इनलाइन-ब्लॉक , तो फ़ायरफ़ॉक्स 2 उपरोक्त को अनदेखा करता है, क्योंकि यह इसे नहीं समझता है, और -moz-inline- स्टैक का उपयोग करता है। अन्य ब्राउज़र इनलाइन-ब्लॉक का उपयोग करते हैं, उनके लिए असंगत की अनदेखी करते हुए -मोज़-इनलाइन-स्टैक ।

 <style> li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; } </style> 

दुर्भाग्य से, यह एक छोटी बग का कारण बनता है:



ईमानदारी से, मुझे नहीं पता कि इसका कारण क्या है। सौभाग्य से, यह <li> तत्व की पूरी सामग्री को एक अतिरिक्त <div> के साथ लपेटकर काफी सरलता से व्यवहार किया जाता है।

 <li> <div> <h4>This is awesome</h4> <img src="1450821541436477177797" alt="lobster" width="75" height="75"/> </div> </li> 

अब आइई 7 पर चलते हैं। यह इनलाइन-ब्लॉक का भी समर्थन नहीं करता है, लेकिन हम ट्रिक का उपयोग कर सकते हैं, धन्यवाद जिसके कारण स्क्रीन पर <li> तत्वों को इनलाइन-ब्लॉक के मान का उपयोग करते हुए प्रदर्शित किया जाएगा। कैसे? हम hasLayout का उपयोग करेंगे , IE की एक जादुई संपत्ति जो कई जोड़तोड़ उपलब्ध कराती है। आप स्पष्ट रूप से hasLayout को इंगित नहीं कर सकते : तत्व के लिए सही है या इसे कुछ इसी तरह से सरल तरीके से करना है, हालांकि, आप ज़ूम को निर्दिष्ट करके तंत्र को शुरू कर सकते हैं : 1 ।

तकनीकी रूप से, हैलआउट वाले तत्व जो अपने आप को और अपने बच्चों को प्रदान करने के लिए जिम्मेदार हैं। इसे न्यूनतम ऊंचाई और चौड़ाई के साथ मिलाएं, और परिणाम को प्रदर्शित करने के बहुत करीब पहुंचें : ब्लॉक । यह एक जादू पाउडर की तरह है जो गायब होने पर दिखाई देने वाली सभी समस्याओं को बनाता है।

जब हम ज़ूम: 1 और * डिस्प्ले: इनलाइन > तत्वों के लिए इनलाइन (तारांकन चिह्न IE 6 और IE 7 के लिए एक हैक है ) जोड़ते हैं, तो हम IE 7 को इनलाइन-ब्लॉक की तरह प्रदर्शित करना सिखाएंगे:

 <style> li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; } </style> 

लगभग किया हुआ। केवल IE 6 शेष है:



IE 6 न्यूनतम ऊंचाई का समर्थन नहीं करता है, लेकिन बदले में हम ऊंचाई संपत्ति के लिए इसके गलत संदर्भ का उपयोग कर सकते हैं। _Height ( सामने अंडरस्कोर नोट करें) को 250px पर सेट करें और वांछित ऊंचाई के साथ सभी <li> तत्व प्राप्त करें। यदि सामग्री निर्दिष्ट मूल्य से अधिक है, तो यह बस अपने कंटेनर को बढ़ाएगा। अन्य सभी ब्राउज़र _height को अनदेखा करेंगे ।

अंतिम CSS और HTML इस तरह दिखते हैं:

 <style> li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; _height: 250px; } </style> <li> <div> <h4>This is awesome</h4> <img src="1450821541436477177797" alt="lobster" width="75" height="75"/> </div> </li>