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

Question

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

这显示第一行的插入符号

第二行的Caret向下移动

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

修改：用于测试Safari 6.0.1和Chrome 22.0.1229.94的浏览器

Answer 1

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

也许:first-line伪元素会以某种方式帮助，但是，尝试一下。但我不能在这里好好利用它。

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