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

Question

当占位符的字体大小与输入字体大小不同时，占位符在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;
}

<input type="text" value="" placeholder="Placeholder text">

也可用as a jsFiddle。

Answer 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;
}

<input type="text" value="" placeholder="Placeholder text">