Почему плавающий элемент ввода меняет свою высоту?

Question

В принципе, я хотел бы, чтобы диапазон и элемент ввода занимали одинаковое количество вертикального пространства, чтобы правильно выравнивать текст в двух прямоугольниках. Я могу достичь этого довольно легко, если не плавать элементы. Но как только я добавляю свойство float, некоторые дополнительные пиксели добавляются к высоте входного элемента. И я не могу понять, почему это так.

И как это исправить?

Эта проблема существует в Safari на iOS 6 и 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

Две вещи. Кажется, что плавающий ввод дает ему 2px margin, который вы можете легко удалить. Если вы сделаете это и удалите атрибут 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; 
}