Düğmeye dolgu eklemek, Firefox ve IE

Question

'daki diğer düğmeleri aşağı doğru iter. Doğal bir Windows düğmesinin görünümü ve izlenimine uyacak şekilde basit bir düğme stili çizmeye çalışıyorum.

aşağıdaki css Bkz:

@import url(https://fonts.googleapis.com/css?family=Open+Sans); 

#OfficeUI { 
    font-size: 11px; 
    font-family: "Segoe UI", "Open Sans"; 
} 

.btn { 
    background-color: #E1E1E1; 
    border: 1px solid #ADADAD; 
    color: #444; 
    font-family: "Segoe UI", "Open Sans"; 
    font-size: 11px; 
    height: 22px; 
    min-width: 74px; 
    padding: 0 1px 1px 0; 
} 
.btn:focus { 
    outline: none; 
} 

.btn:hover { 
    background-color: #E5F1FB; 
    border-color: #0078D7; 
    border-width: 1px; 
} 

.btn:active { 
    background-color: #CCE4F7; 
    padding: 0; 
} 

.btn-default { 
    border-color: #0078D7; 
    border-width: 2px; 
} 

ve aşağıdaki HTML:

Bu Chrome'da arkadaşları çalışır, ancak FireFox veya Kenar (IE) çalıştırırken, bazı garip davranışlar var

Bu nedenle, düğme normal olarak biçimlendirilmiştir ve bir düğmeye basarsanız, test, bir tür basılmış efekt elde etmek için 1px aşağı ve 1px'i sağa kaydırır.

Ancak, FireFox'ta yürütüldüğünde, ikinci düğme bir piksel aşağı kaydırılır, bu nasıl olur?

Bir fiddle ekledim, ancak Fiddle, Firefox'ta veya Edge'de sorunu yeniden üretemiyor.

Answer 1

Düğmelerin dikey hizalanmasıyla ilgili bir sorun gibi görünüyor. Tarayıcı, düğmeyi 'satır içi' olarak görüntüler. 'Vertical align: top;'; sorunu giderir. Eğer oynamam sorunu yeniden yapamıyorsanız

.btn { 
     vertical-align: top; 
     background-color: #E1E1E1; 
     border: 1px solid #ADADAD; 
     color: #444; 
     font-family: "Segoe UI", "Open Sans"; 
     font-size: 11px; 
     height: 22px; 
     min-width: 74px; 
     padding: 0 1px 1px 0; 
} 

https://jsfiddle.net/7gdfr2qk/7/