फ़ायरफ़ॉक्स: बॉक्स मॉडल की गलत व्याख्या?

Question

मैंने अभी फ़ायरफ़ॉक्स के अजीब व्यवहार की खोज की है।

यदि मेरे पास 100px ऊंचाई का टेबल सेल है, और इसमें 20px पैडिंग जोड़ें - इसकी कुल ऊंचाई 140px होनी चाहिए।

http://jsfiddle.net/8wDde/

कोई भी एक ठीक जानने:

सभी ब्राउज़रों सही ढंग से काम करते हैं, फायरफॉक्स 8.0 गद्दी पर ध्यान नहीं देता?

Answer 1

ऐसा लगता है सबसे अच्छा पार ब्राउज़र समाधान तालिका पंक्ति बराबर की पूरी ऊंचाई निर्धारित करने के लिए किया जा सकता है

tr {height: 140px;} 

देखें: http://jsfiddle.net/8wDde/19/

ऊंचाई और सेल के गद्दी के लिए

Answer 2

जो एक अजीब व्यवहार है। display:block; जोड़ें समस्या को ठीक कर सकते हैं। FF8.01 देखने में परीक्षण किया:

http://jsfiddle.net/8wDde/1/

लेकिन मैं यह भी पता नहीं क्यों?

मैंने https://developer.mozilla.org/en-US/search?q=table+padding में खोज की, लेकिन कुछ भी नहीं मिला। हो सकता है कि आप वहां खोजने की भी कोशिश कर सकें।

अद्यतन: http://jsfiddle.net/8wDde/7/

overflow:hiddentd परिवर्तन लाइन से बचने के लिए जोड़ें।

Answer 3

मुझे Google पर इसके बारे में कोई जानकारी नहीं मिली, इसलिए फ़ायरफ़ॉक्स के लिए इसे ठीक करने का एक तरीका एक सीएसएस हैक का उपयोग करना होगा।

@-moz-document url-prefix() { 
td{ 
    height:140px !important; 
} 
} 

जाहिर है, अगर ऊंचाई 200px था, तो आप उस 240px के लिए शीर्ष पर और नीचे पर लापता 20px के लिए खाते को बदल देंगे।

यह सभी फ़ायरफ़ॉक्स संस्करणों को लक्षित करता है, मुझे यकीन नहीं है कि एक एफएफ 8 विशिष्ट सीएसएस हैक है।

आप इस डेमो देख सकते हैं: http://jsfiddle.net/charlescarver/8wDde/2/

संपादित करें: मैं Giberno का जवाब चाहते अधिक

Answer 4

यह मैं another question पर की गई टिप्पणियों के एक जोड़े, उम्मीद है कि एक छोटा सा साफ की पूरी वर्णन है। ध्यान दें कि ओपेरा के पास फ़ायरफ़ॉक्स के समान व्यवहार है।

उपरोक्त आरेख में, कुल सेल क्षेत्र अंधेरा बॉक्स है, और My Text टेक्स्ट td की सामग्री है, और यह सेल बॉक्स (सी) को परिभाषित करता है।

अब, सीएसएस 2।1 कल्पना का कहना है:

एक 'तालिका पंक्ति' तत्व का पिटारा की ऊंचाई गणना की जाती है एक बार उपयोगकर्ता एजेंट उपलब्ध पंक्ति में सभी कोशिकाओं है: यह पंक्ति का अभिकलन 'ऊंचाई' की अधिकतम है, पंक्ति में प्रत्येक सेल की गणना 'ऊंचाई', और कोशिकाओं द्वारा आवश्यक न्यूनतम ऊंचाई (MIN)। 'टेबल-पंक्ति' के लिए 'ऑटो' का 'ऊंचाई' का अर्थ है लेआउट लेआउट के लिए उपयोग की जाने वाली पंक्ति ऊंचाई MIN है। MIN सेल बॉक्स ऊंचाई और सेल बॉक्स संरेखण पर निर्भर करता है (अधिक लाइन बॉक्स ऊंचाई की गणना की तरह)। ...

सीएसएस 2.1 में, सेल बॉक्स की ऊंचाई सामग्री द्वारा आवश्यक न्यूनतम ऊंचाई है। तालिका कक्ष की 'ऊंचाई' संपत्ति पंक्ति की ऊंचाई (ऊपर देखें) को प्रभावित कर सकती है, लेकिन यह सेल बॉक्स की ऊंचाई में वृद्धि नहीं करती है।

तो td { height:100px; } पंक्ति ऊंचाई (आर) को प्रभावित करता है (यह कम से कम 100px उच्च होगा) लेकिन सेल बॉक्स (सी) को प्रभावित नहीं करता है।

दूसरी ओर, td { padding:20px; } सेल बॉक्स (सी) पर लागू होता है, इसलिए यदि (सी) + टॉप पैडिंग + नीचे पैडिंग की ऊंचाई 100px से कम है, तो पंक्ति ऊंचाई प्रभावित नहीं होती है और अभी भी 100px है।

यदि (सी) + शीर्ष पैडिंग + नीचे पैडिंग 100px से अधिक है, पंक्ति ऊंचाई ऊंचाई (सी) + शीर्ष पैडिंग + नीचे पैडिंग की पूर्ण ऊंचाई को समायोजित करने के लिए विस्तारित होगी।

फिर td { background-color:blue } पूर्ण पंक्ति ऊंचाई (आर) और सेल चौड़ाई पर लागू होता है।

आप http://jsfiddle.net/Ez7xz/

पर कार्रवाई में देख सकते हैं अंतिम भ्रामक कारक Firebug में td की गणना ऊंचाई का मूल्य है। ऐसा लगता है कि यहां क्या हो रहा है यह है कि यह मान रहा है कि ऊंचाई content-box बॉक्स आकार का परिणाम है, और आर के मूल्य की रिपोर्ट शीर्ष और नीचे पैडिंग कम है। हालांकि यह अजीब लगता है, यह स्पष्ट नहीं है कि यह अन्य मूल्य क्या उचित रूप से रिपोर्ट कर सकता है।