输入占位符问题的对齐答案

【问题标题】：Alignment of input's placeholder issue输入占位符问题的对齐
【发布时间】：2017-05-22 22:41:07
【问题描述】：

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

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

和 CSS：

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

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

谷歌浏览器（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）：

我很乐意将它精确地放在中间，请帮助实现这一点。谢谢！

更新：

我试过了：

【问题讨论】：

【解决方案1】：

字体系列可能有问题。今天我花了 6 个小时在 Android 上解决了同样的问题。最终这是字体“HelveticaNeueCyr”的问题。该字体仅在 Android 设备上存在间隙，无法用 css 修复。

我改成 Arial 并修复了它。

【讨论】：

【解决方案2】：

将line-height 添加到 CSS：

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

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

【讨论】：

感谢您的回答，但问题仍然存在。抱歉误导，我从源代码中删除了填充。没有填充问题是一样的。
尝试在css中添加这个。 input::-webkit-input-placeholder {} jsfiddle.net/d0rfbbLm/1 并检查：stackoverflow.com/questions/4982045/…
不幸的是，它并没有解决问题。您使用什么版本的谷歌浏览器？
查看上面的链接。不幸的是，您无法垂直对齐占位符。五、55.0.2883.87米