css - 如果使用 CSS line-height，插入符号在第二行向下移动 – 有解决方法吗？

Question

在 div 中使用该line-height属性contenteditable会导致插入符号在移动到第二行后向下移动。这在一些自定义网络字体中更为明显，但在标准字体（如 Arial）中也会发生。这种行为有解决方法吗？

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

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

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

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

Answer 1

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

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

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