光標在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太大，直到我開始打字

回答

相關問題