Chrome中Stylus修改字体大小后光标位置未同步的问题求助

在Chrome浏览器中使用Stylus插件调整网页样式时，遇到一个问题：修改font-size属性后，文本输入框/编辑器内的光标位置无法跟随字体大小同步调整，出现明显错位。

示例场景：

• 当设置font-size: 14px时，光标与文本位置对齐正常
• 当设置font-size: 20px时，光标位置明显偏移，和放大后的文本无法匹配

完整操作过程：有动态GIF和视频可演示整个问题出现的流程。

恳请各位帮忙解决光标位置与字体大小同步的问题，谢谢！

解决方法 #

1. 同步调整line-height属性 #

光标错位最常见的原因是仅修改了font-size，但未同步更新line-height，导致行高与字体大小不匹配。在Stylus的自定义样式中添加行高设置：

/* 针对输入框或编辑器元素 */
textarea, .CodeMirror textarea {
  font-size: 20px !important;
  line-height: 1.3em !important; /* 可根据字体大小微调，或设为固定值如24px */
}

确保行高能够容纳放大后的字体，光标会自动跟随文本行高重新定位。

2. 强制设置光标高度 #

部分网页编辑器（如jqplay使用的CodeMirror）有独立的光标样式，可直接指定光标高度匹配行高：

.CodeMirror-cursor {
  height: 1.3em !important; /* 与上方设置的line-height保持一致 */
}

通过强制定义光标高度，让其与放大后的字体对齐。

3. 触发元素重绘 #

如果CSS调整无效，可通过简单的JavaScript强制触发编辑器元素重绘，让浏览器重新计算光标位置。可借助Stylus的JS注入功能或Tampermonkey脚本实现：

const editor = document.querySelector('.CodeMirror');
if (editor) {
  // 隐藏再显示元素，触发重绘
  editor.style.display = 'none';
  setTimeout(() => editor.style.display = 'block', 10);
}

此操作会强制浏览器重新渲染编辑器，修正光标位置偏差。

4. 排查插件冲突 #

部分Chrome插件（如广告拦截器、其他样式修改插件）可能干扰Stylus的样式生效，可临时禁用其他插件测试，确认是否为冲突导致的问题。

内容的提问来源于stack exchange，提问作者Marslo