Warum verändert das Floaten eines Eingabeelements seine Höhe?

Question

Grundsätzlich möchte ich, dass ein Span und ein Eingabeelement die gleiche Menge an vertikalem Raum einnehmen, um den Text in den beiden Boxen richtig auszurichten. Ich kann das ganz einfach erreichen, wenn ich die Elemente nicht schwebe. Aber sobald ich eine float-Eigenschaft hinzufüge, werden einige zusätzliche Pixel zur Höhe des Eingabeelements hinzugefügt. Und ich kann nicht für das Leben von mir verstehen, warum das so ist.

Und wie repariere ich es?

Dieses Problem besteht bei Safari auf iOS 6 und Chrome auf dem Desktop. Kommt auch in Firefox vor, aber die Effekte sind etwas anders.

Ich erstellte this fiddle, die mein Problem zeigt.

<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

Zwei Dinge. Es scheint zu schweben, die Eingabe gibt ihm einen 2px Rand, den Sie leicht entfernen können. Wenn Sie das tun und das Linienhöhenattribut entfernen, scheint sich alles in beiden Punkten zu befinden.

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