input框点击后发生位移的解决办法

在做案例的时候，出现了如下问题：input框点击后，发生了明显的位移。

百度了一圈，没有找到答案。

后来重新看了一下自己的代码，终于找到了原因。

原来是因为 input 的高度和行高 给的不一致导致的。

    input {
      height: 26px;
      font-size: 12px;
      line-height: 20px;
      padding-left: 8px;
      outline: none;
      color: #666;
      appearance: none;
      border: 1px solid #666;
      box-sizing: border-box;
    }

 将 line-height 设置为 26px （与行高相等），问题就解决了。

 

---

注：文章内容主要是记录学习过程中遇到的一些问题，以及解决方法。留个记录，同时分享给有需要的人。如有不足之处，欢迎指正，谢谢！