为什么插入符号在可满足的With位置不可见:Relative?

2022-09-01 00:00:00 html css contenteditable

contenteditable元素具有position: relative和背景色时,插入符号放在该元素中时是不可见的。下面是一个例子:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
.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修复问题:

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">
.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也可以解决此问题:

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">
.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>

display: inline-block添加到<span>元素

添加display: inline-block(或display: block)解决问题:

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">
.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>

其他堆栈溢出相关问题

  • Edit cursor not displayed on Chrome in contenteditable
  • contenteditable cursor doesn't appear

相关文章