html - 输入的占位符对齐问题

Question

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

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

和 CSS:

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

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

谷歌浏览器(55.0.2883.87 m):

Mozilla Firefox(45.0.2 版):

Internet Explorer(版本 11.576.14393.0):

歌剧(42.0.2393.94 版):

但它在以下位置正确显示(正如我希望显示的那样):

边缘(v.38.14393.0.0):

Safari(适用于 Windows 版本 5.1.7 7534.57.2):

我很乐意将它恰好放在中间，请帮助实现这一目标。谢谢!

更新:

我试过:

• 重置 CSS；
• 设置行高；
• 设置填充；
• ::-webkit-input-placeholder 选择器设置高度/行高；

Answer 1

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

我改成 Arial 并修复了它。