chrome <input type =“range”/>总是高于其他html元素

Question

假设我有一个简单的容器，它有三个元素：

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

但它显示最后的#rge总是高于其他两个， 像这样（在chrome中查看）：http://jsfiddle.net/hh54188/SYNPa/1/

为什么会发生这种情况？如何在不添加其他html元素的情况下解决此问题？只需使用css

即可

Answer 1

您应该将以下CSS添加到您的#rge定义中：

vertical-align:middle;

这会对齐线上垂直居中的元素。