html - FireFox 中的 `contenteditable = true` 高度问题

Question

当 contenteditable="true" 为空 div 时:

CSS:

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

HTML:

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

在 IE 和 Chrome 中，它显示高度就像一个带有小填充的普通输入字段。在 Firefox 中，它只显示我在样式中添加的 3px 填充。没有它，它就会坍塌并且只有边界那么高。

你知道这是否是 Firefox 的错误吗？您能建议一种处理方法吗？

Answer 1

解决方法:

[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

对于这个空的 div，

1 到 3 不适用，因为 div 是空的。它没有线框或 child 。因此第 4 项适用。

解决方法是在 div 中强制至少有一个行框，以便它获得非零高度。