Allineamento verticale del testo all'interno di <button> su Firefox e Chrome quando si utilizza Helvetica

Question

Sto provando a creare uno stile, e appare in modo incoerente in Firefox e Chrome quando si utilizza il font Helvetica. Arial e Lucida producono però risultati identici.

In Firefox (a sinistra), il testo viene centrato verticalmente in base ad una scatola che avvolge il testo tra cui discendenti. In Chrome (a destra), il centraggio si trova nella parte superiore del testo rispetto alla sua linea di base.

button { 
    border: 1px solid black; 
    font: 18px Helvetica; 
    padding: 10px; 
    background: #ddd; 
} 

Fiddle: http://jsfiddle.net/3wmhpb8g/7/

Questo è su Firefox 31 e Chrome 38 su Mac/Yosemite.

Come è possibile rendere coerenti le viste?

Answer 1

Aggiungi questo alla tua classe Button:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
transform: rotate(-90deg);