आज, इंटरनेट एक्सप्लोरर बॉक्स मॉडल समस्या ज्यादातर एक गैर-मुद्दा है। अधिकांश वेब डेवलपर्स <!DOCTYPE>
मानकों के अनुपालन को लागू करने के लिए एक टैग रखते हैं, और कोई भी वास्तव में इंटरनेट एक्सप्लोरर 5.5 का समर्थन करने के बारे में परवाह नहीं करता है।
हालांकि, कुछ डेवलपर्स IE बॉक्स मॉडल की रक्षा में व्यक्तिपरक, वैचारिक तर्क के साथ आए हैं। उन्होंने दावा किया है कि IE बॉक्स मॉडल W3C मॉडल की तुलना में अधिक "सहज" है, क्योंकि W3C मॉडल बॉक्स की सामग्री को मापता है , जबकि IE मॉडल बॉक्स को ही मापता है:
मैं उनकी बात देख सकता हूं, लेकिन यह मूल रूप से एक व्यक्तिपरक तर्क है, और सबसे महत्वपूर्ण बात मानकों का अनुपालन है।
हालांकि, हाल ही में मैं गंभीर व्यावहारिक कारणों के लिए IE बॉक्स मॉडल को प्राथमिकता देने आया हूं । W3C बॉक्स मॉडल किसी तत्व को किसी अन्य तत्व की सटीक ऑनस्क्रीन पिक्सेल चौड़ाई में गतिशील रूप से आकार देना मुश्किल बनाता है। कारण यह है कि style.width
किसी तत्व की संपत्ति तत्व के कुल ऑनस्क्रीन आकार के लिए जिम्मेदार नहीं है: आपको किसी भी अतिरिक्त सीमा और गद्दी को भी ध्यान में रखना होगा। यह एक समस्या नहीं है अगर दोनों तत्व एक ही सीएसएस वर्ग का उपयोग करते हैं - लेकिन अगर उनके पास अलग-अलग सीएसएस कक्षाएं हैं, तो यह अविश्वसनीय रूप से चुनौतीपूर्ण हो सकता है।
मान लीजिए कि हमारे पास दो divs हैं: A और B. A को html में 400px div के रूप में हार्ड-कोड किया गया है, जबकि B को गतिशील रूप से जावास्क्रिप्ट का उपयोग करके बनाया गया है। नेत्रहीन, हम चाहते हैं कि बी ए की सटीक चौड़ाई हो। पुराने IE बॉक्स मॉडल के तहत, यह तुच्छ है। हम बस कहते हैं: B.style.width = A.style.width
या यहां तक कि B.style.width = A.offsetWidth + "px"
।
लेकिन W3C बॉक्स मॉडल के साथ, यह इतना सरल नहीं है। अब हमें स्टाइल शीट के बारे में भी चिंता करनी होगी। यदि B में A की समान CSS क्लास है, तो हम कह सकते हैं B.style.width = A.style.width
। लेकिन अगर यह नहीं है - और हम इसे सौंदर्य कारणों से नहीं चाहते हैं - हम मुसीबत में हैं। अब हमें ए और बी दोनों की सीमा में कुल पिक्सेल को ध्यान में रखना होगा और यह विशेष रूप से मुश्किल हो सकता है यदि सीमा और पैडिंग असंगत इकाइयों में निर्दिष्ट होती है (सीमा के बाद से एक आम घटना अक्सर 1px लाइन होती है, जबकि पैडिंग ईएमएस में निर्दिष्ट किया जा सकता है)। फिर हमें एक सामान्य इकाई (उन्हें px या px to em) में बदलने के अर्ध-असंभव कार्य का सामना करना पड़ता है । यह सब सिर्फ स्क्रीन पर लाइन अप करने के लिए दो divs प्राप्त करने के लिए है।
इसलिए मूल रूप से, W3C बॉक्स मॉडल हमें सीएसएस बॉर्डर और पैडिंग मुद्दों को ध्यान में रखने के लिए मजबूर करता है जब हम एक तत्व का आकार सेट करते हैं, जबकि IE बॉक्स मॉडल नहीं करता है, क्योंकि चौड़ाई बॉक्स के पूरे आकार को मापती है (अंत में -एंड), बॉक्स की सामग्री के बजाय । यह एक दूसरे के संबंध में गतिशील रूप से आकार के तत्वों को बहुत आसान बनाता है।
यह सब W3C मॉडल पर IE बॉक्स-मॉडल का पक्ष लेने के लिए एक बहुत शक्तिशाली कारण की तरह लगता है (कम से कम वैचारिक रूप से - व्यवहार में IE बॉक्स-मॉडल मृत है)।
प्रश्न : W3C ने इस बॉक्स मॉडल को क्यों चुना? क्या W3C बॉक्स मॉडल के कुछ फायदे हैं जो मैं बस नहीं देख रहा हूं? या मैं बस यहाँ समस्या अतिरंजित कर रहा हूँ?