输入框调整下移，输入中文，字符数字下移一像素的解决方案

前端

2022-12-26 15:44:22

输入框错位问题：原因和解决方案

你是否遇到过输入框下移一像素的问题？更令人沮丧的是，当输入中文、字母或数字时，字符也会向下偏移？不用担心，这是个常见的难题，而且有简单的解决办法！

问题根源

造成这一错位现象的原因是：

浏览器差异： 不同浏览器对输入框的默认样式不同。
输入法： 某些输入法可能会添加额外的字符间距或其他样式。

解决方法

别着急，有两个方法可以帮你解决这个问题：

方法 1：父级高度、行高和输入框高度匹配

<div class="parent">
  <input type="text" />
</div>

.parent {
  height: 40px;
  line-height: 40px;
}

input {
  height: 40px;
}

为父级元素设置固定高度和行高。
为输入框设置与父级相同的高度。

方法 2：调整输入框的 line-height、padding 和 font-size

<input type="text" />

input {
  line-height: 40px;
  padding: 10px;
  font-size: 16px;
}

为输入框设置行高以匹配父级。
添加边距以防止字符下移。
设置字体大小以确保输入框对齐。

代码示例

这两个方法都可以在下面的代码示例中找到：

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent1 {
      height: 40px;
      line-height: 40px;
    }

    input {
      height: 40px;
    }

    .parent2 {
      height: 40px;
      line-height: 40px;
    }

    input.method2 {
      line-height: 40px;
      padding: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="parent1">
    <input type="text" />
  </div>

  <br>

  <div class="parent2">
    <input type="text" class="method2" />
  </div>
</body>
</html>