Trạng thái hoạt động của nút css có khiến văn bản di chuyển không?

Question

Tôi chỉ đang làm việc trên một số ví dụ thô cho một trang web mới mà tôi đang làm việc.

vì một số lý do sau này 2 trong số các nút này trong firefox (mới nhất) sẽ di chuyển văn bản một chút như thể triển khai hoạt ảnh nhấp khi chúng nhập trạng thái hoạt động. tại sao nút đầu tiên cũng không gặp phải vấn đề này?

mã bên dưới

<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> 

css bên dưới

.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;} 

bất kỳ trợ giúp sẽ được đánh giá cao

Answer 1

Xuất hiện có một số đệm trên: trạng thái hoạt động. Tôi đã thêm 'padding: 0;' với các khai báo css ban đầu (để nó được thừa kế bất kể trạng thái) và nó đã khắc phục vấn đề.

Vui lòng xem điều này jsfiddle.

Tôi không biết tại sao nó chỉ xảy ra trên 2 nút cuối cùng.

Answer 2

Giải pháp James Healey hoạt động rất tốt. http://jsfiddle.net/pxx4V/ Tôi chỉ muốn làm rõ ba nút có cùng một vấn đề, nó chỉ là một "hiệu ứng hình ảnh" mà làm cho họ có vẻ như họ không. Đây là một Fiddle với vấn đề, nơi tôi chỉ thay đổi màu văn bản của .pinkbutton: active thành #FFF http://jsfiddle.net/6L6yu/