input输入框在ios手机上打开的浏览器中光标及字体不居中

最新推荐文章于 2024-03-20 20:28:18 发布

YoungShiHao

最新推荐文章于 2024-03-20 20:28:18 发布

阅读量959

点赞数

分类专栏： bug总结

本文链接：https://blog.csdn.net/Y_shihao/article/details/115861842

版权

bug总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

问题：当设置input的高度为42.5px,line-height为50px，只有在IOS手机上打开的浏览器（safari/chrome新版）是不居中的，其他的（安卓浏览器/电脑chrome/safari）都居中

input {
        width: 100%;
        box-sizing: border-box;
        height: 42px; 
        padding-left: 16px;
        background-color: transparent;
        font-size: 18px;
        line-height: 50px;
        border: none;

        &::placeholder {
          font-size: 14px;
          letter-spacing: 0.67px;
          color: #fff;
        }
        &:focus {
          outline: none;
        }
      }

在电脑模拟器chrome/safari/安卓qq浏览器上打开（居中）
在这里插入图片描述
在ios的safari/chrome上打开（偏下）

结论：给input设置lineline-height来让输入内容居中或者上下偏移是不可取的，推荐使用padding撑开高度

input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 0px 10px 16px ;
        background-color: transparent;
        font-size: 18px;
        border: none;

        &::placeholder {
          font-size: 14px;
          letter-spacing: 0.67px;
          color: #fff;
        }
        &:focus {
          outline: none;
        }
      }