Perché fluttuare un elemento di input cambia la sua altezza?

Question

Fondamentalmente mi piacerebbe che uno span e un elemento input prendessero la stessa quantità di spazio verticale, in modo da allineare correttamente il testo nelle due caselle. Posso ottenere questo facilmente abbastanza facilmente quando non fluttuano gli elementi. Ma non appena aggiungo una proprietà float, alcuni pixel extra vengono aggiunti all'altezza dell'elemento di input. E non posso per la vita di me capire perché sia ​​così.

E come lo risolvo?

Questo problema esiste su Safari su iOS 6 e Chrome sul desktop. Accade anche in Firefox, ma gli effetti sono leggermente diversi.

ho creato this fiddle che mostra il mio problema.

<input class='float' value="some text" id='input2'/> 
<span class='float' id='text2'>some text</span><br /> 

input, span { 
    font-family: Helvetica; 
    font-weight: bold; 
    font-size: 15px; 
    line-height: 15px; 
    padding: 0px; 
    border: 0px; 
} 

input { 
    text-align: right; 
} 

.float { 
    float: right; 
} 

Answer 1

Due cose. Sembra che fluttuare l'input gli dia un margine di 2px, che puoi rimuovere facilmente. Se lo fai e rimuovi l'attributo line-height, tutto sembra allineare su entrambi i fronti.

http://jsfiddle.net/cYaa2/4/

input, span { 
    font-family: Helvetica; 
    font-weight: bold; 
    font-size: 15px; 
    padding: 0px; 
    border: 0px; 
} 

input { 
    text-align: right; 
} 

.float { 
    float: right; 
} 

input.float { 
    margin:0px; 
}