input光标错位

文档结构

<div class="noteWrap">
     <input type="text" placeholder="写留言" />
     <img src="images/camera.png" />
</div>

设置样式：

.noteWrap{
    height: 50px;
}
input{
    line-height: 50px;
}

在ios上出现输入文字前光标占满输入框，输入文字后，光标不再占满输入框，而是底部和文字底部齐平。

 

原因：ios光标是和文字底部对齐的

解决方案：input去掉line-height，设置固定高度，父元素设置padding

.noteWrap{
    height: 50px;
    padding: 15px 5px;
}
input{
    height: 20px;
}

也可以给input设置padding撑开