如果使用CSS line-height，插入符号位于第二行 - 是否有解决方法？

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

这显示在第一行上

Normal caret on the first line
插入符插入符在第二行向下偏移

Shifted caret on the second line

行为的演示，可以发现：http://jsfiddle.net/sGgVR/

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

来源

2012-10-23 klotz

我无法复制此行为。我看到字符在字符上方和下方，无论我在第1行还是第2行。删除“行高”CSS不会影响这一点。 –

你使用了什么浏览器？ – klotz

Google Chrome \t 22.0.1229.94 –

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

也许:first-line伪元素会帮助某种方式，但是，试试看吧。但我在这里无法很好地使用它。

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

来源

2012-10-24 19:50:05 gkond

如果使用CSS line-height，插入符号位于第二行 - 是否有解决方法？

回答

相关问题