एचटीएमएल 5 टेबल सेल पैडिंग - ब्राउज़र में अलग - सीएसएस, एचटीएमएल 5, एचटीएमएल-टेबल, क्रॉस-ब्राउजर, पैडिंग

मैंने इसे काफी सरल उदाहरण से तोड़ दिया है।

मेरे लिए, यह फ़ायरफ़ॉक्स 3.6.12 की तुलना में क्रोम 7.0 में अलग दिखता है। IE 9 बीटा क्रोम की तरह दिखता है।

मैं टीडी पर पैडिंग सेट करने में सक्षम होना चाहता हूं, और इसे सभी ब्राउज़रों में समान ऊंचाई के साथ प्रस्तुत करना है। वर्तमान में, 10px शीर्ष पैडिंग के साथ, क्रोम की कोशिकाएं फ़ायरफ़ॉक्स की तुलना में अधिक लंबी लगती हैं।

मैं एरिक के रीसेट सीएसएस का उपयोग करने की कोशिश कर रहा हूं, यह परिणाम नहीं बदलता है किसी भी विचार क्यों इन अलग तरीके से प्रस्तुत किया जा रहा है?

यह कैसा दिखता है इसका एक उदाहरण यहाँ है - http: // yfrog। com / 5zqa7p

और कोड ...

<!DOCTYPE html>
<head>
<title>padding test</title>
<meta charset=utf-8>
<style>
td { width: 100px; height:100px; background: green; padding: 10px 0 0 0; }
</style>
</head>
<body>
<table>
<tr><td>TEST</td></tr>
<tr><td>TEST</td></tr>
</table>
</body>

उत्तर:

उत्तर № 1 के लिए 15

वहाँ जाहिरा तौर पर फ़ायरफ़ॉक्स और क्रोम संभाल में एक बग HTML5 में तालिका कोशिकाओं में बग बग: http://code.google.com/p/chromium/issues/detail?id=50633

जब आप अपने मार्कअप और CSS को 0 पेडिंग के साथ आज़माते हैं, तो वे "फिर से वही करते हैं। जब आप DOCTYPE को HTML5 नहीं मानते हैं तो वे समान होते हैं।


जवाब के लिए 9 № 2

HTML5 के लिए कुछ ब्राउज़र छवियों के साथ तालिका कोशिकाओं में 2px जोड़ते हैं यदि लाइन-ऊंचाई डिफ़ॉल्ट है। यह एक बग के रूप में चिह्नित किया गया है, यह हमेशा इस तरह रहने की उम्मीद नहीं करता है।

table { line-height: 0; }

जवाब के लिए 3 № 3

दरअसल, यह व्यवहार अलग-अलग चूक के कारण होता है box-sizing टीडी तत्वों पर मान। युक्ति पर एक नज़र डालें: http://www.w3.org/TR/css3-ui/#box-sizing0

बॉक्स-साइज़िंग सभी प्रमुख ब्राउज़रों पर सौभाग्य से समर्थित है, देखें http://caniuse.com/#search=box-sizing

लेकिन ब्राउज़र में ऐसे मुद्दे हैं जो आपको डिफ़ॉल्ट को ओवरराइड करने से रोकते हैं box-sizing मूल्य, खासकर जब आप टीडी के साथ काम कर रहे हैं, तो व्यवहार लगभग सभी ब्राउज़रों में अप्रत्याशित है।

में यह जेएसफ़ील्ड उदाहरण ब्राउज़र में सबसे स्थिर व्यवहार द्वारा दिखाया गया है border-box तथा content-box एक DIV तत्व पर।

इसलिए जब ऊंचाई तय हो जाए तो सिर्फ पैडिंग का उपयोग करने से बचें, और इसके बजाय केवल एक साधारण और बुलेटप्रूफ वर्कअराउंड के रूप में अतिरिक्त पैडिंग कंटेनर के साथ टीडी सामग्री लपेटें।

उम्मीद है की यह मदद करेगा!


जवाब के लिए 2 № 4
td { padding: 10px 0 0 0; }

यह कहता है: padding-top: 10px;, 10px को 0 और के साथ बदलें उम्मीद है कि यह "वही होगा। इसका मतलब है कि फ़ायरफ़ॉक्स और IE9 गद्दी के लिए लेखांकन नहीं कर रहे हैं। (मुझे लगता है)


उत्तर के लिए 1 № 5

इसे इस तरह लिखा जाना चाहिए padding: 0 10px 0 10px; अन्यथा ब्राउज़र पूरी तरह से आयाम का समर्थन नहीं करते हैं।


उत्तर के लिए 1 № 6

मुझे ब्राउज़र-विशिष्ट CSS मिला (यहां से) फ़ायरफ़ॉक्स के लिए थोड़ा वर्णनात्मक है जैसे:

background-color:#447d9a;
background-image:url("img/bg.jpg");
background-repeat:repeat-x;

तो, मुझे लगता है, फ़ायरफ़ॉक्स के लिए, पैडिंग वर्णनात्मक हो सकती है बल्कि संक्षिप्त (padding:10px 0 0 0;):

padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

यह केवल फ़ायरफ़ॉक्स के लिए एक समाधान (या एक समाधान हो सकता है) है, और अन्य ब्राउज़रों के लिए विशेष रूप से डिबग करने के लिए काम कर सकता है।


संबंधित सवाल
सबसे लोकप्रिय