Question

我使用的是HR而不是BR，这样我就可以为换行提供视觉维度，并使用特定的unicode字符在浏览器中设置样式。

但是，当我将光标放在每行的开头时，光标不可见。任何想法如何调整样式以使其可见？

受影响的浏览器：Chrome

＆＃13;

.edit-box{
  border: 1px solid black;
  padding: 10px;
}

.line-break{
  border:none;
  margin:0;
  display:inline;
  white-space: nowrap;
}
.line-break::before{
    content: "\21B2";
    vertical-align:5%;
}
.line-break::after{
  content:'';
  display:block;
}

＆＃13;

<div id="test" contenteditable="true" class="edit-box">
  If you place the cursor at the beggining of the following lines <hr class="line-break">The caret is not visible. (before "the")<hr class="line-break">Any css hack to make the cursor visible ? 
</div>

＆＃13;

Answer 1

这是一个古老的错误，我相信这是一个大约5岁的~~所以不要指望它很快就会得到解决。~~这里是bug追踪器：https://bugs.chromium.org/p/chromium/issues/detail?id=170148它已被修复 *但最近报道了一个新奇怪的错误：

这个错误在Linux和Windows上的Chrome v54中重现，如果有伪类：在
之后

你有伪类，所以尽量不要使用它们，尽量不要使用<hr>这样的，它不自然。：P

当放置在一行的开头时，光标在一个可信的元素中不可见

1 个答案: