इनपुट (सबमिट) तत्व फ़ायरफ़ॉक्स में अतिरिक्त स्थान पर है

Question

एक लिंक वाला एक वेब पेज, एक इनपुट (सबमिट) और एक अवधि। सभी एक ही दिखने के लिए स्टाइल हैं, वास्तव में इनपुट हाइपरलिंक और अवधि के समान दिखने के लिए स्टाइल है।

का उपयोग कर परीक्षण किया गया: फ़ायरफ़ॉक्स 3.0, 3.6, 4.0, 14.0.1

किसी कारण से, इनपुट अन्य लोगों के अलावा थोड़ा बड़ा है। साथ ही, इनपुट का पाठ लिंक और अवधि के पाठ के साथ गठबंधन नहीं है। यहां एक लाइव डेमो है।

http://jsfiddle.net/LGftW/

यहाँ मेरी सीएसएस है:

a{ 
    text-decoration:none; 
} 

input[type="submit"]{ 
    border:0 none; 
    background:transparent; 
} 

a, input[type="submit"], span{ 
    border:solid 1px green; 
    font-size:64px; 
    font-family:Arial; 
    font-weight:bold; 
    float:left; 
    padding:0; 
    margin:0; 
} 

मार्कअप:

<a href="#">LINK</a> 
<input type="submit" value="INPUT" /> 
<span>SPAN</span> 

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

संपादित

ऐसा लगता है समस्या की तरह केवल फ़ायरफ़ॉक्स में होता है। आईई 8-9 और क्रोम इसे सही तरीके से प्रदर्शित करता है।

Answer 1

निकालें फ़ायरफ़ॉक्स में बटन गद्दी अपने सीएसएस में input::-moz-focus-inner का उपयोग करके:

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

संपादित: अपडेट किया गया इसके बाद के संस्करण कोड के साथ डेमो लिंक।

SEE DEMO फ़ायरफ़ॉक्स