入力要素の浮動がその高さを変更するのはなぜですか？

Question

基本的には、2つのボックス内のテキストを適切に整列させるために、スパンと入力要素が同じ量の垂直スペースを占めるようにしたいと思います。私は要素を浮かべないと、これを非常に簡単に達成することができます。しかし、floatプロパティを追加するとすぐに、余分なピクセルがinput要素の高さに追加されます。私の人生はそれがなぜあるのか理解できません。

どうすれば修正できますか？

この問題は、iOS 6のSafariとデスクトップのChromeに存在します。 Firefoxでも起こりますが、その効果は多少異なります。

私はthis fiddleを作成しました。これは私の問題を示しています。

<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

2つのもの。入力が浮動しているように見えますが、簡単に取り除くことができる2ピクセルの余白があります。これを行い、line-height属性を削除すると、両方のカウントですべてが整列しているように見えます。

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