如果使用CSS的行高，插入符号会在第二行向下移动 - 有没有解决方法？

Question

如果使用CSS的行高，插入符号会在第二行向下移动 - 有没有解决方法？

cssgoogle-chromesafariwebkitcursor-position

5

在一个contenteditable的div中使用line-height属性会导致插入符号移动到第二行时出现向下偏移的情况。虽然使用像Arial这样的标准字体也会发生这种情况，但使用自定义Web字体更加明显。有没有一种方法可以解决这种行为问题呢？ 以下图片展示了第一行和第二行上的插入符 Normal caret on the first line

您可以在此处查看此行为的演示：http://jsfiddle.net/sGgVR/ 编辑：测试使用的浏览器是Safari 6.0.1和Chrome 22.0.1229.94

- klotz

1

我无法复制这种行为。我看到插入符号在第一行或第二行时都会在字符上方和下方移动。删除 line-height CSS 对此没有影响。 - Kevin Boucher

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gkond · Answer 1

目前没有找到任何优雅的解决方案。当line-height小于font-size时，行会重叠，并且光标的顶部部分会被顶部文本框截断。

也许:first-line伪元素在某种程度上会有所帮助，不过可以试一下。但我在这里无法很好地使用它。

另一种奇特的方法是使用JS将多行文本分成几个不同的元素。每个元素当然都具有contentEditable属性。然后在换行时创建新元素，在退格或删除时合并。但这种解决方案似乎过于复杂。