contenteditable firefox插入与空段落和占位符

Question

我有一个令人满意的div，并且在一个空段落中。我使用CSS内容属性为该段设置了占位符。

div { background-color: #ddd; height: 300px; }
p { background-color: #bbb; height: 16px; }
p:empty:before { content: "Start writing here…" }

<div contenteditable="true">
  <p></p>
</div>

在Chrome中，当我将插入符号放入该段落并开始编写一些文本时，文本会放在段落中。当我按下介绍时，它会生成一个新段落，新文本会放在新段落中。

我希望在Firefox中有相同的行为，但相反，文本放在段落之前，当我按下介绍开始一个新段落时，它会引入换行符而不是新段落。

以下是codepen中的演示：http://codepen.io/anon/pen/gpaNqQ

Answer 1

如果检查每个p元素，则可以看到浏览器正在应用其默认边距样式。将margin: 0应用于p元素时，额外的间距会消失。

＆＃13;

＆＃13;

div { background-color: #ddd; height: 300px; }
p { background-color: #bbb; height: 16px; margin: 0; }
p:empty:before { content: "Start writing here…" }

＆＃13;

<div contenteditable="true">
  <p></p>
</div>

＆＃13;

＆＃13;

＆＃13;