इनलाइन-ब्लॉक तत्वों से निपटने के दौरान गीको और ब्लिंक में ऊंचाई गणना इतनी असंगत क्यों है?

Question

जैसा कि आप नीचे देख सकते हैं, दोनों गेको और ब्लिंक अलग-अलग इनलाइन-ब्लॉक तत्वों के लिए एक असंगत ऊंचाई गणना करता है, भले ही उनके सभी में एक ही सीएसएस वर्ग हो। ऐसा लगता है कि ^{(* रोकें *)} ट्रिडेंट यह सही करने के लिए एकमात्र लेआउट इंजन है।

क्या मैं एक संपत्ति सेट करना भूल गया था?

इसके अलावा, आप इस fiddle में देख सकते हैं, अगर मैं 1em Blink renders अपेक्षा के अनुरूप करने के लिए .3em से अतिरिक्त जगह बदल जाते हैं। सभी तत्व एक ही ऊंचाई प्राप्त करते हैं। यद्यपि गीको अभी भी "टूटा हुआ" है।

क्या किसी को पता है कि यह क्यों हो रहा है और इसे कैसे ठीक किया जाए?

---

<a> <button> <input> <span> 

---

छिपकली (फ़ायरफ़ॉक्स वी 39.0।)

---

Blink (गूगल क्रोम वी 43.0.2357.132 मी।):

---

ट्राइडेंट (इंटरनेट एक्सप्लोरर वी 11.0.9600.17843।):

---

body { 
 
    font: normal 15px arial; 
 
    padding: 1em; 
 
} 
 

 
.button { 
 
    background: #444444; 
 
    border: none; 
 
    box-sizing: content-box; 
 
    color: #ffffff; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-family: arial; 
 
    font-size: 1em; 
 
    height: auto; 
 
    line-height: normal; 
 
    margin: 0; 
 
    min-height: 1em; 
 
    padding: .3em; 
 
    text-decoration: none; 
 
}

<a class="button" href="#">button</a><button class="button">button</button><input class="button" type="button" value="button" /><span class="button">button</span>

Answer 1

गीको (फ़ायरफ़ॉक्स), यह फॉर्म तत्वों के लिए ::moz-focus-inner पर सीमाओं के कारण है। यदि आप ध्यान देते हैं, तो फॉर्म तत्व (input और button) हमेशा अन्य तत्वों की तुलना में ~ 2px व्यापक और लंबा होते हैं।

इसे हल करने के लिए, हमेशा (अपने रीसेट के हिस्से के रूप) अपने सीएसएस से जोड़ें:

button::-moz-focus-inner{ 
    border:0; 
    padding:0; 
    margin-top:-2px; 
    margin-bottom:-2px; 
} 
input::-moz-focus-inner{ 
    border:0; 
    padding:0; 
    margin-top:-2px; 
    margin-bottom:-2px; 
} 

नकारात्मक हाशिए जरूरी हैं ताकि फ़ॉन्ट प्रदर्शित करता है "सही ढंग से" line-height में। आपको अपनी लाइन-ऊंचाई फिट करने के लिए मूल्यों को ट्विक करने की आवश्यकता हो सकती है, लेकिन ये मान अधिकतर ठीक काम करते हैं।

ब्लिंक (क्रोम), तत्व वास्तव में एक ही आकार के हैं, लेकिन एकमात्र मुद्दा यह है कि वे "गलत गठबंधन" हैं। आप देखेंगे कि कभी-कभी फॉर्म तत्व inline-block सेटिंग में दूसरों की तुलना में थोड़ा कम दिखाते हैं। इसे हल करने के लिए, बस यह सुनिश्चित करें कि वे सभी एक ही लंबवत संरेखण का उपयोग करते हैं, उदा।: - अगर आप, इनलाइन-ब्लॉक निर्दिष्ट हमेशा क्रम मिसलिग्न्मेंट को रोकने के लिए, ऊर्ध्वाधर संरेखण निर्दिष्ट करने के लिए याद

display: inline-block; 
vertical-align: top; 

यह हमेशा एक साथ ऊपर दो संपत्तियों की घोषणा करने के एक अच्छा अभ्यास है।