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

Posted 2023-03-05

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

【英文标题】：Input's placeholder misaligned in Chrome when input and placeholder have different font size

【发布时间】：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;

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

也可以使用as a jsFiddle。

【问题讨论】：

有人知道解决方案吗？

两个字体大小应该相同，才能看到中间。

【参考方案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">