为什么浮动输入元素会改变其高度？

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