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

基本上，我希望span和input元素占用相同的垂直空间，以便正确对齐两个框中的文本。当不浮动元素时，我可以很容易地实现这一点。但是一旦我添加了float属性，一些额外的像素就会添加到输入元素的高度。我一辈子都不明白这是为什么

我该如何修复它

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

一些文本

输入，跨度{
字体系列：Helvetica；
字体大小：粗体；
字体大小：15px；
线高：15px；
填充：0px；
边界：0px；
}
输入{
文本对齐：右对齐；
}
.浮动{
浮动：对；
}

两件事。浮动输入似乎给了它2倍的边距，你可以很容易地删除它。如果这样做并删除“线高度”属性，则在这两个方面，所有内容似乎都是一致的

---

浮动跨距不是从它的高度开始移动吗？所有值都是17，但浮动范围是15。是的！观察得好！更改了标题。嗯。。。我给你答案，因为你确实回答了我的问题。遗憾的是，我所问的并不是我想要的答案：p最初的问题出现在iPhone上，我试图通过上面的片段复制它。但可惜的是，事实证明，这两种情况并不相同。下次我会更努力地创建一个等效的代码片段，它实际上，而不仅仅是表面上，复制了这个问题。哈哈，对不起！如果你问一个新问题，我会尽力回答，但我对iPhone的东西不太在行。

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