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;
      }
     }