iOS输入框光标粗长是因line-height远大于font-size时被拉伸所致，安卓则按字体大小定高；解决需统一设line-height≈font-size（如1.2或20px）、禁用transform等脱离文档流属性、确保font-size≥16px，并配合scroll-margin-top等滚动优化。
为什么iOS输入框光标看起来又粗又长？
不是bug，是iOS对line-height的渲染逻辑：当line-height远大于font-size时，光标会按行高拉伸，视觉上像一根粗柱子。安卓则基本按字体大小定光标高度，所以差异明显。
常见诱因：line-height: 50px配font-size: 14px——光标直接撑满50px高度，遮挡文字下半部分。
- 统一把
line-height设为接近font-size的值，比如line-height: 1.2或line-height: 20px - 避免用固定大像素值（如
line-height: 48px）；改用无单位数值更安全 - 如果必须保持视觉行距，用
padding替代line-height来撑开容器
聚焦后光标跑到文字外面或偏移怎么办？
本质是iOS Safari在软键盘弹出瞬间视口未稳定，导致getBoundingClientRect()返回错误坐标，进而影响光标定位和scrollIntoView行为。
纯CSS无法修复这个时机问题，但可以降低错位概率：
- 给
input加scroll-margin-top: 12px（推荐值），让浏览器滚动时预留顶部空间，避免光标紧贴视口顶边 - 禁用
transform、perspective或will-change等会让元素脱离文档流的属性 - 确保父容器没有
overflow: hidden——它会干扰光标位置计算
textarea光标在中文输入法下跳动或错位
拼音候选栏展开时，iOS会临时修改文本框内部布局，但scrollHeight还没更新，导致光标锚点漂移。这不是样式问题，而是渲染时机竞争。
绕过方式有限，但CSS层可配合JS做轻量干预：
-
textarea必须设height: auto+min-height: 44px，不能写死height - 加
scroll-margin-bottom: 60px（匹配键盘高度），但前提是父容器可滚动且有明确高度 - 别依赖
:focus-within触发滚动——它在键盘弹出前就生效，容易滚过头；改用visualViewport?.addEventListener('resize', ...)判断键盘状态再操作
font-size太小会连带放大光标吗？
会。iOS聚焦时若检测到font-size ，不仅页面缩放，光标也会被同比例拉伸。这是系统级行为，CSS无法单独约束光标尺寸。
最稳解法就是堵住源头：
- 全局兜底：
input, textarea, select, [contenteditable] { font-size: 16px !important; } - 框架内动态插入的内容（如Vue的
v-html）需用:deep([contenteditable])或[contenteditable]::part(input)穿透处理 - rem/em单位务必确认最终计算值≥16px，例如
html { font-size: 16px; }+input { font-size: 1rem; }
光标问题从来不是单一样式能解决的，它总是和font-size、line-height、软键盘状态、滚动时机耦合在一起。改一个值可能缓解表象，但真正稳定得同步控制这四个变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
