तालिका कक्ष की जावास्क्रिप्ट चौड़ाई एक पिक्सेल बहुत छोटी क्यों है?

Question

जब आप border-collapse: collapse; को एक तालिका में अपनी कोशिकाओं की सीमाओं को "मिश्रित" करने के लिए लागू करते हैं, तो यह जावास्क्रिप्ट में तालिका कक्षों की चौड़ाई निर्धारित करने में समस्याएं उत्पन्न करता है। उदाहरण के लिए, इस पृष्ठ को देखें:
http://game-point.net/misc/browserTests/scratchpads/jsTableWidth/
दो टेबल हैं, एक ढह गई सीमाओं के साथ एक और बिना। यदि आप बिना किसी सीमा के सीमा में एक पंक्ति पर क्लिक करते हैं, तो jQuery की आंतरिकविड्थ और बाहरी विड्थ फ़ंक्शन रिपोर्ट करता है कि मैं क्या देखने की अपेक्षा करूंगा (सामग्री चौड़ाई, और सामग्री क्रमशः सीमा चौड़ाई क्रमशः; कोई पैडिंग नहीं है)।

हालांकि, यदि आप ढह गई सीमाओं के साथ तालिका में एक पंक्ति पर क्लिक करते हैं, तो आपको ब्राउज़र-असंगत व्यवहार मिलता है, खासकर clientWidth संपत्ति पर। फ़ायरफ़ॉक्स में, clientWidthwidth() जैसा ही है। आईई और क्रोम में, यह 1 पिक्सेल ऊंचा है, और ओपेरा में, यह width() जैसा ही है, लेकिन ओपेरा का width() बहुत छोटा है। वास्तव में, width() फ़ायरफ़ॉक्स को छोड़कर मैंने परीक्षण किए गए सभी ब्राउज़रों में एक पिक्सेल बहुत छोटा है। तो यदि आप एक स्क्रीनशॉट लेते हैं और सामग्री वास्तव में 80px है, width() 79px है (jQuery इसे गणना किए गए सीएसएस मान से प्राप्त करता है)। ऐसा क्यों है?

मैं वास्तविक सामग्री की चौड़ाई प्राप्त करना चाहता हूं। मैं width() का उपयोग नहीं कर सकता क्योंकि केवल फ़ायरफ़ॉक्स को ध्वस्त सीमाओं के साथ यह अधिकार मिलता है। मैं outerWidth() का उपयोग नहीं कर सकता क्योंकि इसमें सीमाएं शामिल हैं (या शायद केवल एक सीमा, क्योंकि यह वास्तविक सामग्री चौड़ाई से केवल 1px बड़ा है)। मैं clientWidth का उपयोग नहीं कर सकता क्योंकि इसका मूल्य ब्राउज़र के बीच असंगत है। मुझे क्या करना चाहिए और width() 1px क्यों अधिकांश ब्राउज़रों में बहुत कम है जब सीमाएं गिर गई हैं?

Answer 1

मुझे लगता है कि हर ब्राउज़र में समस्या है लेकिन ओपेरा वास्तव में कुछ है जो jQuery अपने width() फ़ंक्शन के साथ कर रहा है; इसमें चौड़ाई और ऊंचाई के लिए कस्टम हुक हैं और यह हमेशा सही गणना की चौड़ाई नहीं लौटाता है। जब मैं इन तालिका कक्षों की चौड़ाई प्राप्त करने के लिए window.getComputedStyle का उपयोग करता हूं, तो यह वास्तव में मुझे उचित रेंडर चौड़ाई देता है। मैं ओपेरा के window.getComputedStyle आउटपुट को बग के रूप में रिपोर्ट करने जा रहा हूं, क्योंकि जब आप jQuery को बाईपास करते हैं तो यह आपको उचित रेंडर चौड़ाई नहीं देता है।

Answer 2

ढह गए सीमा मॉडल में, कोशिकाओं को केवल "मिश्रित" नहीं किया जाता है, वे निकटवर्ती कोशिकाओं द्वारा साझा किए जाते हैं।

तो कहते हैं कि तुम इस तरह मार्कअप है:

<table style="border-collapse: collapse"> 
    <tr> 
    <td style="border: 1px solid black; width: 100px"> 
    <td style="border: 1px solid black; width: 100px"> 
    </tr> 
</table> 

ढह सीमा मॉडल में, इस तालिका की चौड़ाई 102px है। सीमा का 0.5px है जो वास्तव में तालिका के बाहर, फिर सीमा का 0.5px, फिर 100px कक्ष, फिर सीमा का 1px, फिर 100px सेल, फिर सीमा के 0.5px, फिर तालिका के बाहर सीमा के 0.5px है। http://www.w3.org/TR/CSS21/tables.html#collapsing-borders

पर चित्र देखें तो यह देखते हुए कि, पहले सेल की विभिन्न चौड़ाई के लिए UA वापस क्या करना चाहिए? क्या यह 100px होना चाहिए? 101px? 102px? कुछ और? बस सामग्री चौड़ाई और सीमा चौड़ाई लौटने पर 102px वापस आ जाएगा, लेकिन सेल द्वारा ली गई वास्तविक जगह केवल 101px है ...

इसके अलावा, यदि jQuery सामग्री चौड़ाई की गणना कर रहा है तो यह भी इस समस्या में भाग सकता है, अगर यह विशेष रूप से सीमा-ढह गई कोशिकाओं को किसी भी तरह से नहीं करता है।

और क्लाइंटविड्थ के लिए कोई वास्तविक कल्पना नहीं है, बहुत कम jQuery की चौड़ाई() और इस तरह, बिल्कुल। इस प्रकार की व्याख्या बताती है कि आप जो परिणाम देखते हैं वे पूरे स्थान पर क्यों हैं।

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