Javascript 在Firefox中，在contenteditable div内单击2-3次，光标就会移动到带有占位符css的contenteditable div外

我已经使用div创建了一个编辑器，内容可编辑为true，并使用了CSS创建的占位符。这在除Firefox之外的所有浏览器中都能正常工作

下面是html和css中的代码

HTML-

<div contenteditable="true" data-placeholder="in case this div is empty"></div>

---

如果我们在Firefox中运行上述代码（我使用的是版本27），并在内容可编辑分区内单击2-3次，则光标将改变其位置，我无法在分区内写入任何内容。然而，如果我们在分区外单击，然后再次单击分区内，我将成功获得焦点，我们可以在其中写入内容。请帮助解决此问题。

能否尝试为占位符的CSS提供显示块？它对我起作用。

您需要将

：before

伪元素位置设置为

绝对值，如下所示：

div:empty:before {
    content: attr(data-placeholder);
    color: gray;
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px;
    width: 100%;
    height: 100%;
}

但一旦你这么做了，就会因为Firefox bug而引入插入符号定位问题。选择你的毒药>：（
即使我删除填充也会出现问题。您是在OSX还是Windows上？另外，请测试：并告诉我是否存在相同的问题。我使用的是Windows。我使用JSFIDLE.net/7j2AD进行了测试，问题是重复的。不幸的是，问题在于您安装的Firefox或插件。我已经在3 diff上使用FF 27.0.1进行了测试这里有不同的机器，所有都可以。尝试禁用插件，如果不起作用，你可能必须重新安装FF。@AndyM可能是你没有正确地遵循步骤。我测试过的每台机器都可以复制。windows+FF、osx+FF、ubuntu+FF。
div:empty:before {
    content: attr(data-placeholder);
    color: gray;
    position: absolute;
    top: 0;
    left: 0;
    padding: 6px;
    width: 100%;
    height: 100%;
}