Javascript 在我开始键入之前，contentEditable div中的光标太大

在Chrome和其他浏览器中，当您第一次访问时，您会注意到文本字段（实际上是一个可编辑的DIV）中闪烁的光标延伸到字段底部以下几个像素。这是它的截图

奇怪的是，当你开始打字时，问题就消失了

---

有人知道为什么会发生这种情况吗？

您的CSS类中有

div.question

显示：内联块

删除此选项并允许默认的
显示：block对于div似乎解决了这个问题，尽管我不能说我知道为什么。。。。我会尝试替换您尝试使用float-through的布局，以查看这是否解决了问题。
尝试以下操作：


向图元添加最小高度
用换行符预先填充它


将其更改为多行文本框：）
更好的解决方案是：

目前您有：

div.question.editing {
    width: 95%;
}

让它阻塞

div.question.editing {
    width: 95%;
    display: block;
}

希望这是解决这个问题的最好办法

在某些情况下，我们可能需要display:inline块。所以，在用户开始键入之前，我们可以应用样式display:blockCSS3：空选择器在这里有帮助

/* initially before user starts typing */

.multi-line-contenteditable:empty{
display : block;
}

/* After user types the characters */

.multi-line-contenteditable{
display : inline-block;
}

嗯，是的-这似乎解决了问题-但是它创建了另一个问题，因为出现在div.question右侧的元素现在出现在下一行-而它们应该在同一行。要尝试，请键入“2+2”并按enter键。有什么想法吗？你需要添加另一个带有display inline的类，并添加到div标记“2+2=4”嗯，问题不是元素不够高-当你开始键入时，它的高度不会改变，只有光标大小会改变…
可以设置为display:none我也有这个问题。问题是，我切换到contenteditable div是因为我需要它是单行、内联块，以模拟“弹性输入”。所以这些答案都不适合我。如果我希望它是
内联块
<代码>块
对我来说是不可能的，所以这个答案只有在这个特定的情况下才是好的，很好的解决方案！谢谢