iOS 平台上 input 光标高度与父盒子相同,如何调整?
input 输入框光标,在安卓手机上显示没有问题,但是在苹果手机上,当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是 ios 的 input 光标。
回复
1个回答

test
2024-06-18
根据你提出的问题,我分析问题的原因大致如下:
通常我们习惯用 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;
}
}
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容