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

Question

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

这会在第一行显示插入符

第二行的插入符下移

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

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

Answer 1

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

也许 :first-line 伪元素会以某种方式提供帮助，但请尝试一下。但我在这里无法很好地利用它。

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