css - div 作为 contenteditable : cursor is located below the 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;
}