div as contenteditable：cursor位於div下面

Question

我有一個div，我將它定義爲contenteditable（表現得像輸入一樣）。

我想寫的東西，所以我用鼠標專區內點擊：

在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然後用鼠標點擊鼠標。

任何幫助表示讚賞！

Answer 1

好像Firefox有一些問題與填充的原因有什麼的<div>在啓動裏面..你用min-heighthttp://jsfiddle.net/h3WDq/731/

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