firefox chrome padding issue with button

Question

У меня проблема с проектом, я не знаю, как это сделать, хром и firefox не отображают ту же самую высоту с моими кнопками. Я смотрел вокруг, и я обнаружил, что у firefox проблемы с кнопками, поэтому я добавляю код ниже, но все равно не работает. Что бы это могло быть?

.button-type::-moz-focus-inner { border: 0; padding: 0; margin:0; } 


.button-type { 
    background: #a9a9a9; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 3px rgba(255,255,255,0.2), inset 0 2px rgba(255,255,255,0.2), inset 0 28px 22px rgba(255,255,255,0.2), inset 0 -10px 28px rgba(0,0,0,0.2); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 3px rgba(255,255,255,0.2), inset 0 2px rgba(255,255,255,0.2), inset 0 28px 22px rgba(255,255,255,0.2), inset 0 -10px 28px rgba(0,0,0,0.2); 
    font: Arial, Helvetica, sans-serif; 
    line-height: 1; 
    padding: 8px 15px; 
    width: auto; 
    height: auto; 
    border: none; 
    text-align: center; 
    font-size: 13px; 
    color: #fff; 
    cursor: pointer; 
    display: block; 
    text-decoration: none; 
    text-shadow: -1px -1px #333; 
} 
.button-type.black { 
    background: #000; 
    color: #fff; 
} 
.button-type.gray { 
    background: #a9a9a9; 
} 
.button-type.light-gray { 
    background: #d3d3d3; 
    color: #222; 
} 

Answer 1

решить ее решение (и ошибок) было:

display:block 

заменить его:

display:inline