div as contenteditable：cursor位于div下方

Question

我有一个div，我将其定义为contenteditable（表现得像输入）。

我试图写点东西，所以我在div中点击鼠标：

在chrome上：一切正常，光标位于div。

在Firefox上：奇怪的行为，光标位于div下方。 在您撰写内容后，已修复。

我试图让firefox以chrome身份运行。

这是链接：

http://jsfiddle.net/h3WDq/730/

这是我的div：

<div class="divAsInput" contenteditable="true"></div>

这就是css：

.divAsInput {
    word-break: break-all;
    padding-top: 1em;
    border: none;
    padding-bottom: 0;
    outline: none;
    outline-style: none;
    box-shadow: none; 
    border-bottom: 1px solid black;
}

请在Chrome和Firefox上打开它，然后点击带有div的鼠标。

任何帮助表示赞赏！

Answer 1

似乎firefox在填充方面存在一些问题，因为<div>内部没有任何内容......您尝试使用min-height http://jsfiddle.net/h3WDq/731/

.divAsInput {
    min-height: 20px;
    word-break: break-all; 
    border: 1px solid lime;
}