फ़ायरफ़ॉक्स में इनपुट पर बॉक्स आकार का आकार छिपाता है

Question

इनपुट में -moz-box-sizing : border-box; लागू करते समय मुझे फ़ायरफ़ॉक्स के साथ कोई समस्या है, ऐसा लगता है कि जिस प्रकार का टेक्स्ट मैं टाइप करता हूं वह कहीं छिपी हुई या ओवरफ्लॉउन या कुछ है।

आप यहां समस्या देख सकते हैं: Test (980px से छोटे आकार में अपनी विंडो का आकार बदलें क्योंकि यह मोबाइल संस्करण है);

तो वहां क्या समस्या हो सकती है? मैं सब कुछ मैं मिल सकता है, और केवल एक चीज है कि काम किया -moz-box-sizing : border-box; संपत्ति (निकाल रहा है की कोशिश की है क्योंकि:।

Answer 1

आप 100% करने के लिए ऊंचाई निर्धारित करना चाहिए मैं अपने इनपुट फ़ील्ड के लिए निम्नलिखित सीएसएस की कोशिश की है, और यह मदद की:

input[type="text"] { 
    -moz-box-sizing: border-box; 
    font-size: 16px; 
    height: 100%; 
    padding: 20px; 
    width: 100%; 
} 

==> कारण यह है कि 20px का आपका पैडिंग बहुत अधिक है। पैडिंग को हटाने का प्रयास करें। आप देखेंगे कि इनपुट फ़ील्ड का टेक्स्ट अचानक दिखाई देता है ;-)। मैंने इसे देखा, मैंने ऊंचाई 100% निर्धारित की। अब आप पैडिंग को कम कर सकते हैं उदा। 10 पीएक्स और सब ठीक दिखता है।

Answer 2

input[type="text"] { 
padding-top:0; 
padding-bottom:0; 
vertical-align:middle; 
} 

Answer 3

मुझे यह समस्या थी लेकिन शुरुआत में सफारी 6+ में थी। कुछ पाठ इनपुट सम्मानित पैडिंग शीर्ष/नीचे, लेकिन अन्य कम नहीं हुआ और समाप्त हो गया। जैसा कि यहां बताया गया है, उन सभी पर height: 100% का उपयोग करके, वे सभी लगातार बने रहे और पैडिंग शीर्ष/नीचे का सम्मान करना प्रतीत होता था। हालांकि, यह ऊंचाई में कुछ अतिरिक्त पिक्सल जोड़ा गया।

अंत में, मैंने उन सभी पर box-sizing: content-box कर दिया, जिसने उन्हें पैडिंग टॉप/नीचे सम्मान दिया लेकिन ऊंचाई में अतिरिक्त अतिरिक्त पिक्सेल के बिना।

को width: calc(100% - <padding L+R>) के साथ इसका पीछा करना पड़ा, हालांकि यह एक नुकसान है।

Answer 4

मैं इनपुट पाठ टैग

input[type="text"] { 
    padding: 6px 12px 12px 6px; 
} 

input[type="email"] { 
    padding: 6px 12px 12px 6px; 
} 

input[type="password"] { 
    padding: 6px 12px 12px 6px; 
}