jQuery। विड्थ() और .height() अजीब व्यवहार

Question

क्यों following code में .height() 100 से कम 95 देता है, जबकि .width() अपेक्षा के अनुसार 200 लौटाता है? मैं फ़ायरफ़ॉक्स 3.6.3 के साथ काम करता हूं।

HTML:

<table><tr> 
    <td id="my"></td> 
</tr></table> 
<div id="log"></div> 

सीएसएस:

#my { 
    border: 5px solid red; 
} 

जे एस:

$("#my").width(200).height(100); 
$("#log").append("Width = " + $("#my").width() + "<br />"); 
$("#log").append("Height = " + $("#my").height()); 

मैं .outerWidth() और .outerHeight() और भी .innerWidth() और कोशिश की। आंतरिक हाइट(), लेकिन उनमें से कोई भी अपेक्षित परिणाम देता है: code example

लेकिन, अगर मैं position: absolute सेट करता हूं तो यह much better दिखता है!

क्या कोई इस व्यवहार को समझा सकता है?

Answer 1

की गणना करते समय jQuery द्वारा उपेक्षित रहे ऊंचाई और चौड़ाई की गणना के लिए कुछ jQuery तरीके हैं। jQuery डॉक्स से outerHeight()

अंश उपयोग करके देखें: http://api.jquery.com/outerHeight/

.outerHeight([ includeMargin ])

includeMargin - तत्व की गणना में मार्जिन शामिल करने के लिए है कि क्या यह दर्शाता है एक बूलियन।

http://api.jquery.com/innerHeight/

.innerHeight()

इस विधि ऊपर और नीचे गद्दी, पिक्सेल में सहित तत्व, की ऊंचाई देता है।

संपादित करें: स्थापना ऊंचाई() टीडी-तत्व पर डिफ़ॉल्ट गद्दी (1px) शामिल करने के लिए निकाला जाता है। की गणना आयाम वास्तव में रहे हैं ...

alt text http://files.wordofjohn.com/with_border.png

आप इन मुद्दों से बचने के 0px करने के लिए डिफ़ॉल्ट गद्दी स्थापित करना चाहिए।

table td { 
    padding: 0; 
} 

संपादित करें 2: यह एक ब्राउज़र मुद्दा (शायद एक तालिका के आयामों की गणना के प्रतिपादन इंजन की विधि से संबंधित कुछ) प्रतीत होता है। इस व्यवहार के प्रभाव ब्रोवर में अलग-अलग होंगे। आपको divs का उपयोग करके वैकल्पिक, टेबल-कम, समाधान मिलना चाहिए।

Answer 2

मुझे इस बारे में निश्चित नहीं है .. मुझे यह भी अजीब लगता है .. यह मेरा अनुमान है।

सीमा वास्तविक ऊंचाई में खाती है और ऊंचाई

Answer 3

मैं वास्तव में जॉन से बेहतर इस व्यवहार को स्पष्ट नहीं कर सकता, लेकिन चूंकि यह ब्राउज़र असंगतता अभी भी आसपास है (कम से कम उन लोगों के लिए जो jQuery संस्करण को अपग्रेड नहीं कर सकते हैं) मैंने सोचा कि मैं इस समस्या के लिए एक समाधान साझा करूंगा।

एचटीएमएल डोम गुण clientHeight और clientWidth का उपयोग अधिकांश ब्राउज़र से अधिक सुसंगत हो रहा है।

$("#my").width(200).height(100); 
$("#log").append("Width = " + $("#my").attr("clientWidth") + "<br />"); 
$("#log").append("Height = " + $("#my").attr("clientHeight")); 

यह भी संभव है कि इन offsetHeight उपयोग कर सकते हैं कि/offsetWidth बजाय, तुम क्या जरूरत पर निर्भर करता है।