前端 - iOS 平台上 input 光标高度与父盒子相同，如何调整？

Question

input 输入框光标，在安卓手机上显示没有问题，但是在苹果手机上，当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是 ios 的 input 光标。

Answer 1

根据你提出的问题，我分析问题的原因大致如下：

通常我们习惯用 height 属性设置行间的高度和 line-height 属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于 input 的 line-height 的值，当有内容时，光标从 input 的顶端到文字的底部。

所以有效的解决方法应该，高度 height 和行高 line-height 内容用 padding 撑开。

示例代码如下：

 .content{      float: left;      box-sizing: border-box;      height: 88px;      width: calc(100% - 240px);       .content-input{        display: block;        box-sizing: border-box;        width: 100%;        color: #333333;        font-size: 28px;        //line-height: 88px;        padding-top: 20px;        padding-bottom: 20px;      }     }