css - 内容可编辑内联 div 为空时移动

Question

这是一个例子:http://jsfiddle.net/nojv18wf/

<div>
    <div class="display">Blah blah blah?</div>
    <div class="input" contenteditable="true"></div>
</div>

<br /><br /><br /><br />

<div>
    <div class="display">Blah blah blah?</div>
    <div class="input border" contenteditable="true"></div>
</div>

当您点击“blah blah blah”时，注意插入符的去向。

在第一个示例中，它跳转到 blah blah blah 之前，直到您键入文本，然后它出现在正确的位置。

在第二个示例中，带有边框，它可以正常工作。

如何在不添加丑陋边框的情况下让插入符号出现在正确的位置？

编辑:这似乎只发生在 Chrome 中，它在 Firefox 甚至 IE 中正常工作。

编辑 2: 我使用内联的原因是文本换行就好像它是一个平滑的延续，而不是换行整个 block 。例如:http://jsfiddle.net/khkurs5t/

Answer 1

您始终可以为您的输入 添加透明边框，Fiddle

border: solid 1px transparent;

这将使您的文本也与您提到的保持在同一行。

注意* 猜猜谁不喜欢将文本保留在同一行上……是的……IE 但此方法在所有其他浏览器中都有效。祝你好运，我的 friend !