如果使用CSS line-height,Caret会在第二行向下移动 - 是否有解决方法？

Question

使用div中的line-height属性contenteditable会导致插入符号在移动到第二行后向下移动.对于某些自定义Web字体,这一点更为明显,但也会出现像Arial这样的标准字体.这种行为有解决方法吗？

这显示了第一行的插入符号

第二行的插入符号向下移动

可以找到行为的演示: http ://jsfiddle.net/sGgVR/

编辑:用于测试Safari 6.0.1和Chrome 22.0.1229.94的浏览器

Answer 1

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

也许:first-line伪元素会有所帮助，不过，尝试一下。但我在这里无法很好地利用它。

另一种奇怪的方法是使用 JS 将多行文本分解到多个不同的元素上。当然，每个内容都有可编辑的内容。然后在换行符上创建新元素，在退格键上合并或删除。但这个解决方案似乎过于复杂。