解决 input 文字和 placeholder 字体大小不一样 placeholder 不垂直居中的问题

在使用 input 标签时，我们经常会遇到文字和 placeholder 的字体大小不一致，以及 placeholder 不垂直居中的问题。这会影响页面的美观性和用户体验。本篇文章将提供一种有效的方法来解决这两个问题。

字体大小不一致问题

input 文字和 placeholder 的字体大小不一致是由 line-height 造成的。默认情况下，input 标签的 line-height 是正常文本的 1.2 倍。这会导致 placeholder 的字体大小比文本本身稍大。

为了解决这个问题，我们可以将 input 标签的 line-height 设置为 normal。

input {
  line-height: normal;
}

垂直居中问题

placeholder 不垂直居中的问题是由 vertical-align 造成的。默认情况下，placeholder 的 vertical-align 是 baseline。这会导致 placeholder 位于文本行的底部。

为了解决这个问题，我们可以将 placeholder 的 vertical-align 设置为 middle。

::-webkit-input-placeholder {
  vertical-align: middle;
}

:-moz-placeholder {
  vertical-align: middle;
}

::-moz-placeholder {
  vertical-align: middle;
}

:-ms-input-placeholder {
  vertical-align: middle;
}

综合解决方案

将上面两个解决方案结合起来，我们就可以同时解决 input 文字和 placeholder 的字体大小不一致问题以及 placeholder 不垂直居中的问题。

input {
  line-height: normal;
}

::-webkit-input-placeholder {
  vertical-align: middle;
}

:-moz-placeholder {
  vertical-align: middle;
}

::-moz-placeholder {
  vertical-align: middle;
}

:-ms-input-placeholder {
  vertical-align: middle;
}

通过使用上述方法，你就可以轻松地解决 input 文字和 placeholder 字体大小不一致以及 placeholder 不垂直居中的问题。这将使你的页面更加美观，为用户提供更好的体验。