FireFox中的'contenteditable = true`身高问题

Question

当有空div时contenteditable="true":

CSS:

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

HTML:

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

在IE和Chrome中,它显示高度,就像具有小填充的普通输入字段一样.在Firefox中,它只显示我在样式中添加的3px填充.没有,它崩溃,只有边界高.

你知道这是不是Firefox的bug？你能建议一种处理它的方法吗？

Answer 1

解决方法:

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

CSS2第10.6.3节:

元素的高度是从其顶部内容边缘到下面第一个适用的距离:

1. 如果框使用一行或多行建立内联格式化上下文,则为最后一个行框的下边缘
2. 如果孩子的下边距没有因元素的下边距而崩溃,则其最后一个流入子项的底部(可能是折叠)边缘的下边缘
3. 最后一个流入子项的下边界边缘,其上边距不会随元素的下边距折叠
4. 零,否则

对于这个空div,

1到3不适用,因为div是空的.它没有行框或儿童.因此第4项适用.

解决方法在div中强制执行至少一个行框,以使其达到非零高度.