सीएसएस बटन सक्रिय स्थिति पाठ को स्थानांतरित करने के कारण?

Question

मैं बस एक नई साइट के लिए कुछ मोटे उदाहरणों पर काम कर रहा हूं जिस पर मैं काम कर रहा हूं।

किसी कारण से फ़ायरफ़ॉक्स (नवीनतम) में इन 2 बटनों में से 2 बटन टेक्स्ट को थोड़ा आगे बढ़ाएंगे जैसे कि एक सक्रिय एनीमेशन लागू करने पर क्लिक एनीमेशन लागू करना। पहला बटन इस मुद्दे का भी अनुभव क्यों नहीं करेगा?

नीचे

.pinkbutton { border:1px solid #D2247b; width:150px; height:30px; background-color:#EF0093; color:#FFF;} 
.pinkbutton:hover {border:1px solid #FF4296; background-color:#FF5EAC;} 
.pinkbutton:active {border:1px solid #A61D61; background-color:#DC2F85; color:#333232;} 
.pinkbuttondisabled {border:1px solid #F3C4DB; width:150px; height:30px; background-color:#FDC6E2; color:#FFF;} 


.greybutton { border:1px solid #BBBBBB; width:150px; height:30px; background-color:#E2E2E2; color:#8d8c8c;} 
.greybutton:hover {border:1px solid #EF0093; background-color:#E2E2E2; color:#f62c92;} 
.greybutton:active {border:1px solid #696969; background-color:#BFBFBF; color:#424242;} 
.greybuttondisabled {border:1px solid #D5D4D4; width:150px; height:30px; background-color:#F4F4F4; color:#d5d4d4;} 

.whitebutton { border:1px solid #EF0093; width:150px; height:30px; background-color:#FFF; color:#EF0093;} 
.whitebutton:hover {border:1px solid #898989; background-color:#FFF; color:#898989;} 
.whitebutton:active {border:1px solid #898989; background-color:#E2E2E2; color:#979696;} 
.whitebuttondisabled {border:1px solid #FAB2DE; width:150px; height:30px; background-color:#FFF; color:#FAB2DE;} 

नीचे

<fieldset style="width:320px; float:left;"> 
     <legend>Pink Button</legend> 
      <button class="pinkbutton"><span>MESSAGE HERE</span></button> 
      <button class="pinkbuttondisabled" disabled="disabled"><span>DISABLED</span></button> 

    </fieldset> 

    <fieldset style="width:320px; float:left;"> 
     <legend>Grey Button</legend> 
      <button class="greybutton"><span>MESSAGE HERE</span></button> 
      <button class="greybuttondisabled" disabled="disabled"><span>DISABLED</span></button> 

    </fieldset> 

    <fieldset style="width:320px; float:left;"> 
     <legend>White Button</legend> 
      <button class="whitebutton"><span>MESSAGE HERE</span></button> 
      <button class="whitebuttondisabled" disabled="disabled"><span>DISABLED</span></button> 

    </fieldset> 

सीएसएस कोड किसी भी मदद होगी बहुत सराहना

Answer 1

प्रकट होता है वहाँ पर कुछ गद्दी है: सक्रिय राज्य। मैंने जोड़ा 'पैडिंग: 0;' शुरुआती सीएसएस घोषणाओं के लिए (ताकि राज्य के बावजूद इसे विरासत में मिला हो) और इसने मुद्दे को ठीक किया।

कृपया यह jsfiddle देखें।

मुझे नहीं पता कि यह केवल पिछले 2 बटनों पर क्यों हुआ।

Answer 2

जेम्स हेली समाधान बहुत अच्छा काम करता है। http://jsfiddle.net/pxx4V/ मैं सिर्फ तीन बटनों को एक ही समस्या के बारे में स्पष्ट करना चाहता था, यह सिर्फ एक "दृश्य प्रभाव" था जो उन्हें लगता है कि उन्होंने ऐसा नहीं किया था। यहां समस्या के साथ एक पहेली है, जहां मैंने अभी .pinkbutton का टेक्स्ट रंग बदल दिया है: #FFF http://jsfiddle.net/6L6yu/