Css Firefox设置了错误的插入符号位置contentEditable with:before

这是我问题的简化版本
似乎我无法在contentEditable中放置一个定位的伪元素，但在单击以获得contentEditable元素的焦点时，插入符号却定位在正确的位置

div{填充：10px；边框：1px实心#CCC；高度：120px；位置：相对；}
div:：在{
位置：绝对位置；
顶部：10px；
左：10px；
内容：“占位符”；
颜色：#AAA；
过渡：.2s；
不透明度：0；
}
div:empty:：before{
不透明度：1；
}

---

将

：after

元素设置为绝对值时出现问题。我不明白为什么。但是如果你把它放在相对的位置，问题就不存在了

我更新了你的小提琴：

这是新的CSS（带有一些实验性的添加）

剩下的唯一问题是，您可以将焦点放在

：before

元素的文本后面。这就是为什么你想要绝对的。有趣的是：如果将伪元素置于

float:left它显示与在
位置上相同的行为：绝对

更新

当您被迫在peseudo元素上使用absolute时，目前似乎只有一种解决方案。为框定义另一个填充，只要它是空的且有焦点。游乐场：

解决这个问题的一个方法是将可编辑的内容包装在一个DIV中，并给这个DIV一个固定的高度

也就是说，如果您有如下配置：

<div id="wrapper">
    <div contentEditable></div>
</div>

对我来说，这只是一个问题，当盒子是空的。所以我给它播了一个

：

  $("[contenteditable='true']").on('focus', function(){
    var $this = $(this);
    $this.html( $this.html() + '<br>' );  // firefox hack
  });

  $("[contenteditable='true']").on('blur', function(){
    var $this = $(this);
    $this.text( $this.text().replace('<.*?>', '') );
  });

$（“[contenteditable='true']”）。在（'focus'，function（）上{
var$this=$（this）；
$this.html（$this.html（）
});
$（“[contenteditable='true']”）。在（'blur'，function（）上{
var$this=$（this）；
$this.text（$this.text（）.replace（“”，”）；
});

这里的更多信息：
似乎是一个更老的问题：我仍然注意到它。@Dex-那是因为他们还没有修复它…如果你关心这个问题，你应该“明星”。在我的问题（底部）中有一个与报告的错误相关的链接，难以置信，这个问题在2018年仍然存在。不，我不能，它必须是绝对的。必须（这毕竟是我问题的简化版本）。这是一个疯狂的FF错误…好的，我会用这个参数来试试。一个问题：何时删除：before元素？如果能集中注意力，那就没有问题了。是的，不幸的是，在未来到来之前，最好避免这样的事情，而这样的糟糕情况将成为过去。令人难以置信的是，这些浏览器不能在单一的架构标准上达成一致。要想发布一个网站，而不必解决所有的浏览器错误/怪癖，这几乎是不可能的。我真的希望这个问题能尽快得到解决。如果我是世界的独裁者，我会首先消除除一个浏览器以外的所有浏览器，并集中所有其他浏览器的工程师，在一周内加入choise浏览器，并修复其所有缺陷，使其变得完美。这是人类应得的。
<div id="wrapper">
    <div contentEditable></div>
</div>

#wrapper {
  width: 240px;
  height: 70px;
  margin: 0 20px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#wrapper div[contenteditable=true] {
  width: 100%;
  min-height: 35px; /* Not mandatory */
  padding: 8px;
}

  $("[contenteditable='true']").on('focus', function(){
    var $this = $(this);
    $this.html( $this.html() + '<br>' );  // firefox hack
  });

  $("[contenteditable='true']").on('blur', function(){
    var $this = $(this);
    $this.text( $this.text().replace('<.*?>', '') );
  });