Dlaczego przestawianie elementu wejściowego zmienia jego wysokość?

Question

Zasadniczo chciałbym, aby rozpiętość i element wejściowy zajmowały taką samą ilość pionowej przestrzeni, aby poprawnie ułożyć tekst w dwóch polach. Mogę to osiągnąć całkiem łatwo, gdy nie poruszam żywiołami. Ale gdy tylko dodaję właściwość float, dodatkowe dodatkowe piksele są dodawane do wysokości elementu wejściowego. I nie mogę dla życia zrozumieć, dlaczego tak jest.

A jak to naprawić?

Ten problem występuje w przeglądarce Safari na iOS 6 i Chrome na pulpicie. Zdarza się również w Firefoksie, ale efekty są nieco inne.

Utworzono this fiddle, który pokazuje mój problem.

<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

Dwie rzeczy. Wydaje się, że wejście jest płynne, co daje mu margines 2 pikseli, który można łatwo usunąć. Jeśli to zrobisz i usuniesz atrybut line-height, wszystko wydaje się wyrównane w obu przypadkach.

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