光标在CONTENTEDITABLE DIV太大，直到我开始打字

在Chrome中，可能还有其他的浏览器，当你第一次访问my site，你会发现，在文本字段中（实际上是一个可编辑DIV）闪烁的光标下方延伸几个像素领域的底部。 Here是它的截图。光标在CONTENTEDITABLE DIV太大，直到我开始打字

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

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

来源

2012-02-03 sanity

我有这个问题了。事情是，我切换到一个contenteditable div具体，因为我需要它是单线，内联块，以模拟“有弹性的输入”。所以这些答案都不适用于我。 – mwilcox 2013-06-04 18:47:26

更好的解决方案将是：

您目前有：

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

让它阻止

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

来源

2012-02-03 16:56:38 emphaticsunshine

如果我想让它成为'inline-block'，该怎么办？ 'block'对我来说不成问题，所以这个答案在这个特定的情况下是很好的 – vsync 2016-10-13 13:30:17

您的CSS类div.question

display: inline-block;

删除这一点，并允许在div默认display: block;似乎解决这个问题，但我不能说我知道的理由为什么.. ..我会尝试更换你尝试的布局是使用浮动，但看看是否纠正了这个问题。

来源

2012-02-03 16:21:38 nybbler

嗯，是的 - 这看起来似乎解决了问题 - 但是它创建了另一个，因为出现在div.question右边的元素现在出现在下一行 - 而它们应该在同一行。尝试输入“2 + 2”并按回车。有任何想法吗？ – sanity 2012-02-03 16:35:35

你需要添加另一个类与内联显示，并添加到“2 + 2 = 4”的div标记 – emphaticsunshine 2012-02-03 16:40:11

要么给“显示：块”风格编辑 – emphaticsunshine 2012-02-03 16:48:55

尝试以下操作：

添加最小高度的元素
带有换行符<br/>
将其更改为多行文本框:)

预填充它

来源

2012-02-03 16:21:41 greg84

嗯，问题不在于元素不高足够 - 当你开始输入时它的高度不会改变，只有光标大小... – sanity 2012-02-03 16:36:43

可以被设置为显示：无 – user956584 2017-01-08 16:57:48

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

我们可能需要显示：在某些情况下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; 
}

来源

2014-12-03 11:03:38 Parthyz

光标在CONTENTEDITABLE DIV太大，直到我开始打字

回答

相关问题