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 section 10.6.3：

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


最后一个行框的下边缘，如果该框用一行或多行建立内联格式化上下文

如果孩子的下边距没有因元素的下边距而崩溃，则其最后一个流入子项的底部（可能是折叠）边缘的下边缘

最后一个流入子项的下边界边缘，其上边距不会因元素的下边距而崩溃

零，否则

对于这个空div，

1到3不适用，因为div为空。它没有行框或儿童。因此，第4项适用。

变通方法在div中强制执行至少一个行框，以使其达到非零高度。

Answer 2

这在firefox中对我来说很好用

http://jsfiddle.net/D6D6A/

HTML：

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

css：更改为黑色边框，因此更容易看到

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

请注意，如果将填充更改为0px，则它没有高度。但是，使用3px填充，它可以正常工作。

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

2 个答案: