“`contenteditable = true`”在FireFox中的高度问题

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填充。W/o，它会塌陷，只有边框那么高。

你知道这是不是火狐的bug吗？你能提出解决办法吗？

Answer 1

解决办法：

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

CSS2 section 10.6.3

元素的高度是从其顶部内容边缘到第一个适用的位置的距离，如下所示：

1. 最后一行框的底部边缘，如果该框用一行或多行建立内联格式上下文。
2. 如果子元素的底部边缘没有与元素的底部边缘一起折叠，则其最后一个流子的底部边缘(可能会折叠)的底部边缘。
3. 在流中的最后一个子节点的底部边框，其上边框不与元素的底部边相折叠。
4. 零，否则

对于这个空洞无物，

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填充，它的工作方式，它应该。