Firefox不允许空白的contenteditable区域

Question

Firefox版本30。

以下代码在chrome中完美运行，我可以开始输入Paragraph。

但它在firefox中不起作用，任何线索有什么问题

<div>
    <div>
      <span contenteditable="false">Not editable area</span>
        <p contenteditable="true"></p>
    </div>
</div>

JSFiddle - http://jsfiddle.net/THPmr/30/

Answer 1

Chrome似乎会自动为可疑段落分配一些高度，但Firefox并没有。简单的解决方案是在段落中添加min-height。

<p contenteditable="true" style="min-height:15px"></p>

现在我们不必担心额外的空格和不必要的br标签

Answer 2

CSS解决方案：

p[contenteditable] { min-height: 1em}
/* or more generic for any element*/
[contenteditable] { min-height: 1em}

的 DEMO