為什么浮動輸入元素會改變其高度？

Question

基本上我想要一個span和一個輸入元素來占用相同數量的垂直空間，以便正確對齊兩個框中的文本。 當不浮動元素時，我可以很容易地實現這一點。 但是只要我添加一個浮動屬性，就會在輸入元素的高度上添加一些額外的像素。 我不能為我的生活理解為什么會這樣。

我該如何解決？

iOS 6上的Safari和桌面上的Chrome都存在此問題。 在Firefox中也會發生，但效果有所不同。

我創造了這個小提琴 ，顯示我的問題。

<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

兩件事情。 似乎浮動輸入給它一個2px的邊距，你可以輕松刪除。 如果你這樣做並刪除了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;
}