当输入和占位符具有不同的字体大小时，输入的占位符在 Chrome 中未对齐答案

【问题标题】：Input's placeholder misaligned in Chrome when input and placeholder have different font size当输入和占位符具有不同的字体大小时，输入的占位符在 Chrome 中未对齐
【发布时间】：2016-09-16 00:39:00
【问题描述】：

当占位符的字体大小与输入的字体大小不同时，占位符在 Chrome 中垂直未对齐（在 Firefox 中可以正常工作）。

截图：

这是 HTML / CSS：

body {
  padding: 20px;
}
input {
  padding: 0 10px;
  color: green;
  font-size: 30px;
  height: 57px
}
input::-webkit-input-placeholder {
  color: blue;
  font-size: 14px;
  line-height: 57px;
}
input::-moz-placeholder {
  color: blue;
  font-size: 14px;
}

&lt;input type="text" value="" placeholder="Placeholder text"&gt;

也可以使用as a jsFiddle。

【问题讨论】：

有人知道解决方案吗？
两个字体大小应该相同，才能看到中间。

标签： html css google-chrome

【解决方案1】：

这似乎是 Chrome 的错误行为，占位符与输入中较大字体大小的基线垂直对齐。

为了在 Chrome 中正确垂直居中较小的占位符文本，您可以使用 position: relative 和 top: -5px 作为解决方法。

解决方法

body {
  padding: 20px;
}
input {
  padding: 0 10px;
  color: green;
  font-size: 30px;
  height: 57px;
}
input::-webkit-input-placeholder {
  color: blue;
  font-size: 14px;
  position: relative;
  top: -5px;
}
input::-moz-placeholder {
  color: blue;
  font-size: 14px;
}

&lt;input type="text" value="" placeholder="Placeholder text"&gt;

【讨论】：