光标在contentEditable div中太大，直到我开始输入

Question

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

奇怪的是，你开始输入问题的那一刻就消失了。

有谁知道为什么会这样？

Answer 1

更好的解决方案是：

目前你有：

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

让它阻止

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

Answer 2

您的CSS课程中有div.question

display: inline-block;

删除它并允许div的默认display: block;似乎可以解决问题，虽然我不能说我知道原因的原因....我会尝试替换您尝试使用的布局浮动，看看是否能解决问题。

Answer 3

希望这个问题的最佳解决方案。

在某些情况下，我们可能需要显示：inline-block。所以在用户开始输入之前，我们可以应用样式显示：块。 CSS3：空选择器 有助于此......！

/* initially before user starts typing */

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

/* After user types the characters */

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

Answer 4

尝试以下方法：

• 为元素添加最小高度
• 使用换行符<br/>
预先填充它
• 将其更改为多行文本框：）