输入的占位符问题的对齐

Question

我在Google Chrome和其他浏览器中遇到输入（类型搜索）问题。请查看基本的HTML代码：

<input type="search" placeholder="Search">

和CSS：

input {
  height: 30px;
  font-size: 16px;
}

JSFiddle Example。问题是占位符在某些浏览器中没有很好地垂直对齐：

Google Chrome（v.55.0.2883.87 m）：

Mozilla Firefox（v.45.0.2）：

Internet Explorer（v.11.576.14393.0）：

Opera（v.42.0.2393.94）：

但它正确显示（因为我希望它显示在）：

Edge（v.38.14393.0.0）：

Safari（适用于Windows v.5.1.7 7534.57.2）：

我很乐意将它准确放在中间，请帮助实现这一目标。谢谢！

UPD：

我试过了：

• 重置CSS;
• 设置行高;
• 设置填充;
• :: - 用于设置高度/行高的webkit-input-placeholder选择器;

Answer 1

这可能与font-family有关。今天我花了6个小时在Android上解决同样的问题。最终这是字体＆＃34; HelveticaNeueCyr＆＃34;问题。该字体在Android设备上只有差距，这无法用css修复。

我改为Arial并修复了它。

Answer 2

将line-height添加到CSS：

input {
  line-height:30px;
  height: 30px;
  font-size: 16px;
  padding: 1px 0;
}

修改行高，因为您使用了填充。