FireFox中的`contenteditable = true`高度问题 [英] `contenteditable = true` height issue in FireFox

问题描述

如果 div 含有 contenteditable =true：

CSS：

  [contenteditable =true] {
order：1px dashed＃ dedede; 
 padding：3px; 
} 
  

HTML：

 < div contenteditable =true> 
<！ - 默认为空白 - > 
< / div> 
  

在IE和Chrome中，它显示高度，就像一个普通的输入字段和小填充一样。在Firefox中，它只显示我在样式中添加的3px填充。无论如何，它会崩溃并且只与边界一样高。

你知道这是否是一个Firefox错误？您可以提出一种处理方法吗？

解决方案

解决方法：

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

CSS2第10.6.3节：

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

1. 最后一行框的底部边缘，如果框创建了内联使用一行或多行格式化上下文
   
2. 如果子元素的底部边距不与元素的底部边距一起折叠，则其最后流入子元素的底部（可能为折叠）边缘的底部边缘


3. 上一个流入子元素的底部边界边缘，其顶部边距不会与元素的底部边距折叠


4. 零，否则
li>

对于这个空白div，

1通过3不适用，因为div是空的。它没有线盒或儿童。因此
Item 4适用。

解决方法是在div内至少加入一个线框，以便它的高度不为零。

When there is an empty div with contenteditable="true":

CSS:

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

HTML:

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

In IE and Chrome, it shows the height like a normal input field with small padding. In Firefox, it only shows that 3px padding I added in the styles. W/o that, it collapses and is only as tall as the border.

Do you know if this is a Firefox bug? Can you suggest a way to handle it?

解决方案

workaround:

[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

For this empty div,

1 through 3 are not applicable, since the div is empty. It has no line boxes or children. Item 4 therefore applies.

The workaround enforces at least one line box inside the div, so that it gets nonzero height.

这篇关于FireFox中的`contenteditable = true`高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！