div as contenteditable: 光标位于 div 下方

Question

我有一个 div，我将其定义为 contenteditable（行为类似于输入）。

我想写点东西所以我用鼠标在 div:

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

在 Firefox 上：奇怪的行为，光标位于 div 下方。 你写东西后，它就固定了。

我正在尝试让 firefox 像 chrome 一样工作。

这是link:

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;
}

div as contenteditable: 光标位于 div 下方

div as contenteditable: cursor is located below the div

css

contenteditable