Ace 编辑器，光标位置在实际文本上方

Question

我在 Razor 页面中有此代码：

<td>
      <textarea class="MSSQL" id="MyId">
          My code
      </textarea>
</td>

我正在使用 jquery 构建 ace 编辑器：

$('textarea.MSSQL').each(function () {
            var textarea = $(this);
            console.log(this);
            var editDiv2 = $('<div>', {
                position: 'absolute',
                width: "100%",
                height: "200px",
                'class': textarea.attr('class'),
                'Id': textarea.attr('id')
            }).insertBefore(textarea);
            textarea.css('visibility', 'hidden');
            var editor1 = ace.edit(editDiv2[0]);
            editor1.getSession().setValue(textarea.val().trim());
            editor1.getSession().setMode("ace/mode/sql");
            editor1.setTheme("ace/theme/sqlserver");
            editor1.setReadOnly(true);
            editor1.getSession().setUseWrapMode(true);
        });

一切正常，除了编辑器的光标，他的位置在实际文本上方，我已经搜索了这个问题，大多数情况是光标在右边或中间几步实际文本的左侧，解决方案是将字体更改为 monospace。但这里不是这种情况。 有什么建议吗？！

Blockquote

Answer 1

我在 css 主文件中发现了问题，有一段代码更改了 span 的 Line-height，因为 ace 编辑器设置了每个单词一个跨度，导致位置问题。