愿所有的美好和期待都能如约而至

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

发布时间:  来源:互联网  作者:匿名  标签:contenteditable css error Why is the caret invisible in a contenteditable with p  热度:37.5℃

本文介绍了为什么插入符号在可满足的With位置不可见:Relative?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

这篇关于为什么插入符号在可满足的With位置不可见:Relative?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP