सबमिट बटन में फ़ायरफ़ॉक्स ऐड का 2 पीएक्स पैडिंग

Question

नमस्ते मुझे लगता है कि सबमिट बटन में पैडिंग के 2 अतिरिक्त पिक्सेल जोड़कर फ़ायरफ़ॉक्स के साथ कुछ समस्याएं आ रही हैं। मैंने क्रोम और आईई 9 में इसका परीक्षण किया है और दोनों ब्राउज़र कोड को ठीक से प्रस्तुत करते हैं, फ़ायरफ़ॉक्स लगता है

<form method="post" action="index.html"> 
       <input type="text" value="Username"/> 
       <input type="text" value="Password"/> 
       <input type="submit" id="submit" value=""/> 
       <img src="img/header/key.png" alt="" id="key"/> 
     </form> 

    header section form input{ 
     color:#b3aaaa; 
     border:1px solid #cccccc; 
     float: left; 
     padding:5px 8px; 
     margin-left: 6px; 
    } 

:

www.thanathos.host22.com

इस साइट के लिए कोड है: ऊपरी-दाएं corner.Here पर कुंजी पृष्ठभूमि के साथ सबमिट बटन को तल पर 2 पिक्सेल की पैडिंग जोड़ने के लिए वेबसाइट है

मैं इसे कैसे ठीक कर सकता हूं?

यदि इसके लिए कोई समाधान नहीं है तो कृपया मुझे चुड़ैल में समाधान प्रदान कर सकते हैं इनपुट इनपुट इनपुट सबमिट के बराबर है और इनपुट टेक्स्ट शीर्ष-नीचे से केंद्र है?

संपादित करें: मैं किसी अन्य कंप्यूटर में इस जाँच की है और ऐसा लगता है कि फ़ायरफ़ॉक्स विभिन्न कंप्यूटरों पर थोड़ी अलग से पहले कि एक ही ब्राउज़र संस्करण एक वेबसाइट से पता चलता यह इस प्रकार की समस्या को सही ढंग से मैं सामना करना पड़ा renders कुछ समय क्रोम में कुछ ऐसा हुआ। मैं इस समस्या को कभी हल नहीं कर सकता था।

कोई भी जानता है कि एक ही ब्राउज़र एक ही स्क्रीन आकार और संकल्प के साथ अलग-अलग कंप्यूटरों पर एक पृष्ठ को अलग-अलग क्यों प्रस्तुत करेगा?

Answer 1

मुझे इस तरह की समस्या थी।

input::-moz-focus-inner { border:0; padding:0 } 

यह समाधान इस ब्लॉग पोस्ट में एक टिप्पणी में दिया गया था:: मैं तो इस CSS thingy कि समस्या हल हो पाया

Bulletproof CSS input button heights

पोस्ट कहते हैं: यह इसलिए होता है क्योंकि फ़ायरफ़ॉक्स (उपयोगकर्ता एजेंट) CSS शैली !important का उपयोग करती है और CSS संपत्ति को ओवरराइड करने के लिए कुछ भी करने की कोशिश नहीं की जाएगी।

Answer 2

** मैं इस यहाँ छोड़ के बाद से मुझे लगता है कि या तो मामले में उपयोगी anywhoo .. **

बस बटन पहुंच बनाने का प्रयास है और इसके लिए सीएसएस के साथ चारों ओर खेलने:

input[type="submit"] { 
    padding-bottom: 3px; 
} 

संपादित करें

ठीक है तो आपके समाधान में कोई समस्या है, क्योंकि आप बटन के ऊपर की छवि को पोजीशन कर रहे हैं, आप वास्तव में सबमिट-बटन पर क्लिक करना कठिन बना देंगे। यदि आप कुंजी पर माउस को घुमाते हैं तो आप देखेंगे कि यह एक पॉइंटर = नहीं क्लिक करने योग्य नहीं है।

मेरा सुझाव है कि आप छवि-टैग को हटा दें और इसके बजाय इसे अपने सबमिट-बटन में पृष्ठभूमि के रूप में उपयोग करें। कुछ इस तरह:

input[type="submit"] { 
    padding-bottom: 3px; 
    background: url(path-to-image); 
    border: none; 
    height: "img-height"; 
    width: "img-width"; 
} 

तो छवि का आकार सही है, तो यह भी के बाद से आप allready सबमिट बटन में पृष्ठभूमि के कुछ प्रकार है लगता है। आईडी एक ऐसी छवि बनाने के साथ जाती है जो सही आकार है जिसमें पृष्ठभूमि और मुख्य छवि दोनों शामिल हैं (मुझे आशा है कि यह अंतिम वाक्य कुछ संवेदना बनाता है)।

एक और संभावित समस्या यह हो सकती है कि आपके बटन में कोई टेक्स्ट न हो, हालांकि बटन को सीएसएस में पहले से लाइनहाइट/फ़ॉन्ट आकार का उत्तराधिकारी होना चाहिए और इस प्रकार सबमिट-बटन को और बढ़ाया जा सकता है। फ़ॉन्ट आकार: 1 पीएक्स या कुछ जैसे कुछ जोड़ने का प्रयास करें।