时间戳

首页 > 解决方案 > Firefox中文本区域的闪烁高度=继承。这可能是什么原因？

html - Firefox中文本区域的闪烁高度=继承。这可能是什么原因？

问题描述

我在 Windows 上遇到了 Firefox 的问题。它在 MAC 和 Ubuntu 上运行良好。为了描述这个问题，我录制了一个小视频（7 秒）并将其放在 youtube 上（以便帮助）

问题是文本区域不断闪烁、增长和无限减小其大小。

.editable-area {
  margin-bottom: 0 !important;
  textarea {
    resize: none;
    max-height: inherit;
    min-height: inherit;
    height: inherit !important;
 }
}

这是因为height: inherit !importantnode上的属性而发生的textarea。如果我删除height: inherit并只是制作它40px或只是删除它，则没有闪烁但是是的，那么高度与它的父级不同。我正在使用antd的可编辑段落并使用如下：

 <div>
            <Paragraph
                key={props.targetStringId}
                className={"font-weight-normal editable-area mb-0"}
                editable={{
                    editing,
                }}
            >
                {currentVal}
            </Paragraph>
 </div>

如您所见editable-area，类已添加到Paragraph组件中。

有人可以请建议可能是什么问题吗？如果我不能发布更多细节，我很抱歉，因为这是我无法理解的事情。如果我可以添加更多详细信息，请告诉我。

标签： htmlcssreactjswindowsfirefox

解决方案

在花了一些时间检查行为后，我发现这是由于缺少height父元素中的属性。由于父元素缺少height属性，因此子元素具有height: inherit未定义的行为。

我尝试给父元素一个高度（在我的例子中，我给了它100%）并且闪烁消失了。

推荐阅读