div中的carret contenteditable

Question

在我第一次点击div时，我的carret（光标）上升，但如果我将文本写入div文本正确打印（在div的中间）。如何修复此div中占位符的问题？我需要光标最初出现在中间（如打印时的文本）。

演示http://jsfiddle.net/0gr09835/2/以及相关代码段：

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    display: block; /* For Firefox */
}
[contenteditable=true]:empty:focus:before {
    content: "";
}

我的截图：

它在Chrome中正常运行，但在Firefox中无效。

Answer 1

这似乎是Firefox中的一个相当老的错误（https://bugzilla.mozilla.org/show_bug.cgi?id=904846）。

可能的解决方法是将content: ''替换为display: none中的[contenteditable=true]:empty:focus:before。

div.msg {
    font-size: 16px;
    float: left;
    width: calc(100% - 80px);
    height: 64px;
    line-height: 64px;
    padding: 0px 10px;
    color: #1a1a1a;
    border: 0;
    background-color: transparent;
    outline: none;
    font-weight: 400;
    border: 1px solid #000;
    margin-top: 25px;
}

[contenteditable=true]:empty:before{
    content: attr(placeholder);
    display: block; /* For Firefox */
}

[contenteditable=true]:empty:focus:before {
    display: none;
}

<div class="msg" name="msg" placeholder="Write message..." contenteditable="true"></div>

Firefox sets wrong caret position contentEditable on focus中也提到了类似的问题。