Хромвсегда выше, чем другой элемент HTML

Question

Предположим, у меня есть простой контейнер, который имеет три элемента:

<div>
   <span>hello world</span>        
   <input id="ipt" type='test'>
   <input id="rge" type='range'>
</div>

, но он показывает, что последний #rge всегда выше, чем два других, как это (вид в хроме): http://jsfiddle.net/hh54188/SYNPa/1/

Почему это произошло? Как я могу решить эту проблему, не добавляя другой элемент HTML? Просто работа с CSS

Answer 1

Вы должны добавить следующий CSS в ваше определение #rge:

vertical-align:middle;

Это выравнивает элемент по центру по вертикали на линии.