html – FireFox中的`contenteditable = true`身高问题

发布时间：2020-12-14 18:52:37 所属栏目：资源来源：网络整理

导读：如果有一个空的div,其中contenteditable =“true”： CSS： [contenteditable="true"] { border: 1px dashed #dedede; padding: 3px;} HTML： div contenteditable="true" !-- blank by default --/div 在IE和Chrome中,它显示高度,就像具有小填充的普通输入

如果有一个空的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？你能建议一种处理它的方法吗？

解决方法

解决方法：

[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:

the bottom edge of the last line box,if the box establishes a inline formatting context with one or more lines

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

the bottom border edge of the last in-flow child whose top margin doesn’t collapse with the element’s bottom margin

zero,otherwise

对于这个空div,

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!