`contenteditable = true` height issue in FireFox

Question

When there is an empty div with contenteditable="true":

CSS:

[contenteditable="true"] {
    border: 1px dashed #dedede;
    padding: 3px;
}

HTML:

<div contenteditable="true">
    <!-- blank by default -->
</div>

In IE and Chrome, it shows the height like a normal input field with small padding. In Firefox, it only shows that 3px padding I added in the styles. W/o that, it collapses and is only as tall as the border.

Do you know if this is a Firefox bug? Can you suggest a way to handle it?

Answer 1

workaround:

[contenteditable='true']:before {
    content: "\feff ";
}

CSS2 section 10.6.3:

The element's height is the distance from its top content edge to the first applicable of the following:

1. the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
2. the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin
3. the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin
4. zero, otherwise

For this empty div,

1 through 3 are not applicable, since the div is empty. It has no line boxes or children. Item 4 therefore applies.

The workaround enforces at least one line box inside the div, so that it gets nonzero height.

Answer 2

This works just fine for me in firefox

http://jsfiddle.net/D6D6A/

html:

<div contenteditable='true'></div>

css : changed to black border so easier to see

[contenteditable='true'] {
    border: 1px dashed #000;
    padding: 3px;
}

notice if you change padding to 0px , it has no height. However, with the 3px padding, it works like it should.