为什么插入符号在可满足的With位置不可见：Rel

.bug {
  position: relative;
  background-color: lightgrey;
}

<div contenteditable>
  This has caret
  <span class="bug">no caret here?!</span>
  this has caret
</div>

我的第一个想法是这是一个浏览器错误，但它在Chrome和Firefox上是完全相同的错误！ 插入符号消失的原因是什么？是否有解决办法？

推荐答案

不知道问题的确切原因，但您可以通过多种方法修复它。

我之前的解释(可能是错的)：

这不是错误，您将background color放在<span>标记上(在 position:relative)在可内容div元素中，因此 Span位于可内容目录的顶部。

我仍然认为这与z-index有关，因为我们可以在Chrome Focus边框顶部的红色背景下看到图像：

删除position:relative

删除<span>的position:relative修复问题：

.no-bug {
  background-color: red;
}

<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

将z-index添加到<span>元素

添加负值z-index也可以解决此问题：

.no-bug {
  background-color: red;
  position: relative;
  z-index: -10;
}

<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>

.no-bug {
  background-color: red;
  position: relative;
  display: inline-block;
}

<div contenteditable>
  This has caret
  <span class="no-bug">This has caret !</span>
  this has caret
</div>