Cursor too big in contentEditable div until I start typing

Question

In Chrome, and possibly other browsers, when you first visit my site, you'll notice that the blinking cursor in the text field (actually an editable DIV) extends several pixels below the bottom of the field. Here is a screenshot of it.

The weird thing is that the moment you start typing the problem goes away.

Does anyone have any idea why this is happening?

Answer 1

Hopefully the best solution for this issue.

we may need display:inline-block in some cases. So Until user starts typing, We can apply style display:block. CSS3 :empty selector helps here...!

/* initially before user starts typing */

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

/* After user types the characters */

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