👨‍👩‍👦 🕞 👩🏽‍🤝‍👨🏿 टेबल कॉलम की चौड़ाई या जब ब्राउज़र झूठ बोलते हैं 🛰️ 🏮 🍡

प्रागितिहास

कहानी एक प्राचीन प्रोजेक्ट के साथ शुरू होती है जिसमें IE5-6 के तहत भी लिखा गया है। बेशक, IE के नए संस्करणों के तहत यह मैमथ केवल quirks मोड में काम करता है, अन्य ब्राउज़रों के तहत इसे रेंडर करना भी मुश्किल है, और आपको प्रदर्शन के बारे में सपने देखने की ज़रूरत नहीं है।
एक उज्ज्वल दिन, स्वर्ग से एक आवाज़ आई जिसे धीरे-धीरे आधुनिक ब्राउज़रों में फिर से लिखना शुरू कर दिया गया और काम उबलने लगा।
प्रणाली के 99% में इस रजिस्ट्री से टेबल और एक अलग कार्ड के रूपों के रूप में रजिस्ट्रियां शामिल थीं। तालिका का शीर्षक निश्चित होना चाहिए। पुराने संस्करण में, यह स्थिति के साथ कुछ विशिष्ट बैसाखी के साथ किया गया था जो IE7 में पहले से काम नहीं करता था। jQuery पहले से कनेक्ट किया गया है, एक निश्चित तालिका शीर्ष लेख के लिए प्लगइन Google आसान है। कई लाइनों के साथ हेडर का समर्थन नहीं करता है और कॉल और रस्सियों का एक अलग संयोजन? ठीक है, आप अपने आप से थोड़ा काम कर सकते हैं, फिर भी प्लगइन कोड प्राप्त कर सकते हैं और इसे एक विशिष्ट टेबल रैपर में ढाल सकते हैं।
सब कुछ ठीक लग रहा था, लेकिन समय-समय पर कलाकृतियों को 1 पिक्सेल द्वारा क्रॉलिंग कॉलम के रूप में दिखाई देना शुरू हो गया, उन जगहों पर शिफ्ट गायब हो गया या 3-4 पिक्सल तक जमा हो गया। और क्रोम में, यह गड़बड़ नहीं देखी गई थी।

व्यर्थ स्थिति को सुधारने का प्रयास करता है

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

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

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

घोटाले, षड्यंत्र और जांच

काफी हताश, मैंने कैलकुलेटर उठाया, फायरबग खोला और यह जानने की कोशिश में स्तंभों में से प्रत्येक की चौड़ाई को जोड़ना शुरू किया, जहां तालिका छोड़ने की शुरुआत हो रही थी। और ... फायरबग ने कहा कि उन सभी की चौड़ाई समान है! ऐसा कैसे? वे नेत्रहीन भी अलग हैं। शायद ऑब्जेक्ट के मार्कअप के साथ बुकमार्क में फायरबग में कोई समस्या है? मैं डोम में देखता हूं - क्लाइंटविदथ में समान मूल्य है, एफएफ में निर्मित इंस्पेक्टर समान मूल्यों का उत्पादन करता है।
आंख को धोखा दिया जा सकता है, लेकिन पेंट की संभावना नहीं है। मैं संपादक में ब्राउज़र विंडो की स्क्रीन को कॉपी करता हूं और कॉलम की चौड़ाई गिनना शुरू करता हूं। मैं पहले घुमावदार कॉलम पर जाता हूं और पेंट ब्राउज़र की तुलना में 1 पिक्सेल कम चौड़ाई का उत्पादन करता है! पृष्ठ पर वापस जा रहे हैं। सभी ब्राउज़र टूल और jQuery की माँ ने कसम खाई है कि कॉलम की चौड़ाई 473 पिक्सेल है, लेकिन पेंट दृढ़ता से कहता है कि यह वास्तव में 472 है। मैंने तुरंत बीच में चिपके टेप माप के बारे में जादोनाव के एकालाप को याद किया। वास्तव में सास और डेवलपर्स के लिए मिला है? वैसे, IE में, एफएफ में क्या हो रहा है, इस स्थिति को ठीक से दोहराया। षड़यन्त्र?

अगले घंटे मैं Google पर कॉलम चौड़ाई या कुछ क्लाइंटविथ सुविधाओं या .net () फ़ंक्शन की गिनती के लिए मौजूदा बग ढूंढने की कोशिश कर रहा हूं। और कोई फायदा नहीं हुआ। जो कुछ भी पाया जा सकता है, वह या तो मार्कशीट के सीएसएस या स्पष्ट स्कूलों में आंशिक मूल्य है।
नशे में

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

this.nextSibling.offsetLeft - this.offsetLeft = 472

और अब टेबल मेरे सभी ब्राउज़रों में समान हो गए हैं।

क्या चल रहा है

तालिका के लेआउट में कॉलम की चौड़ाई नहीं होती है और ब्राउज़र स्वचालित रूप से तालिका की सामग्री के आधार पर स्तंभ की चौड़ाई को समायोजित करता है। कहीं-कहीं चौड़ाई का परिकलित मूल्य भिन्नात्मक हो जाता है, और यहाँ ऐसा लगता है कि कार्यान्वयन की समस्याएं शुरू हो जाती हैं।
चूंकि एक भिन्नात्मक चौड़ाई खींचना असंभव है, इसलिए मूल्य गोल है, और इस गोल मूल्य को DOM में प्रतिस्थापित किया गया है। कुछ अनुपातों के साथ, गोलाई की त्रुटि जमा हो सकती है और तालिका की समग्र चौड़ाई बढ़ जाएगी या घट जाएगी। यदि आप लेख habrahabr.ru/post/31392 पर विश्वास करते हैं , तो एफएफ सामग्री को माता-पिता के आकार के बिल्कुल फिट करने की कोशिश करता है और कुछ स्तंभों के मूल्यों को 1 पिक्सेल से कम कर देता है, ताकि वे तालिका की चौड़ाई से अधिक न हों, एक ही समय पर ऑफ़सेट कॉलम ऑफसेट के लिए बदल जाता है, लेकिन ClientWidth नहीं है! इसलिए, जब आप तालिका शीर्षक की एक प्रति बनाने की कोशिश करते हैं, तो स्क्रिप्ट एक चौड़ाई लौटाती है जो 1 पिक्सेल से कम नहीं होती है (या बढ़ जाती है) और कॉलम रेंगता है।
मुझे दूसरा विकल्प नहीं दिखता।
IE में स्थिति समान है, केवल वहां इंस्पेक्टर कॉलम चौड़ाई का एक आंशिक मूल्य दिखाता है, क्लाइंटविड में एक गोल मूल्य है, लेकिन यह अभी भी 1 पिक्सेल कम खींचा गया है। वही निदान, केवल निरीक्षक झूठ नहीं बोल रहा है।

पृष्ठ लेआउट में किसी प्रकार की त्रुटि की स्थिति को खत्म करने के लिए, हम ग्रीनहाउस स्थितियों में बग को पुन: पेश करने का प्रयास करेंगे:

छिपा हुआ पाठ

 <!DOCTYPE html> <html> <head> <script src="calc/jquery.js"></script> <script> $(document).ready(function(){ $(window).resize(function() { $('#tr > *').each(function() { var width1 = this.clientWidth; var width2; if ($(this).next('td').length) { width2 = $(this).next('td')[0].offsetLeft - this.offsetLeft; } console.log(width1, width2); }); }); }); </script> </head> <body> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr id="tr"> <td>1234556</td> <td>123455644</td> <td>12345</td> <td>12345565645</td> <td>123455643</td> <td>12345563453433</td> <td>12345565645</td> <td>123455643</td> <td>12345563453433</td> </tr> </table> </body> </html>

वास्तव में, मेरे एफएफ में, खिड़की की चौड़ाई बदलते समय, चौड़ाई 1 और चौड़ाई 2 कभी-कभी 1 पिक्सेल से भिन्न होती है। इसके अलावा, अंतर या तो ऊपर या नीचे हो सकता है, जो DOM को भरते समय और पेज को रेंडर करते समय विभिन्न गोलाई विधियों के उपयोग को समाप्त करता है, लेकिन समस्या वास्तव में टेबल कॉलम के "संघनन" चरण में कहीं है।

बेशक, एक भिन्नात्मक चौड़ाई या ऊँचाई वाले तत्वों की व्यवस्था एक तुच्छ कार्य नहीं है और इसे विभिन्न तरीकों से हल किया जा सकता है, लेकिन मैं DOM में निर्दिष्ट चौड़ाई और पृष्ठ पर वास्तविक एक के बीच विसंगति को क्षम्य नहीं मानता।

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

टेबल कॉलम की चौड़ाई या जब ब्राउज़र झूठ बोलते हैं

प्रागितिहास

व्यर्थ स्थिति को सुधारने का प्रयास करता है

घोटाले, षड्यंत्र और जांच

क्या चल रहा है

More articles: