为什么 FilePond 在我的网站上呈现不正确？答案

【问题标题】：Why does FilePond render incorrectly on my website?为什么 FilePond 在我的网站上呈现不正确？
【发布时间】：2020-06-03 16:19:42
【问题描述】：

我这辈子都想不通。当我在我的网站上实现 FilePond 时，它呈现不正确。请参阅此屏幕截图。

如您所见，那里有 2 个 FilePond 实例。第二个看起来是正确的，但我这样做的方式很笨拙，一旦你开始向其中添加文件，它就会崩溃。在同一个屏幕截图中，您可以看到我打开了开发人员工具并突出显示了一行。突出显示的行和它下面的行是问题所在。它们显示了 FilePond 为那些错误转换的 div 计算的转换，它们是导致灰色区域太短的原因。

我在项目中做错了什么导致 Filepond 突然计算出 .filepond--panel-center 和 .filepond--panel-bottom 的错误 css 转换？请帮忙！

我知道最常见的错误是人们忘记在页面顶部添加<!DOCTYPE html>。我没有忘记。

好的，这是我部署的网站，您可以自己查看：http://laf.devign.nl/items/new

使用user1@example.com 和secret 登录。

如果您碰巧在 Mac 上，出于某种原因，它确实可以在 Safari 中正确呈现。因此，您可以将其与它进行比较，以了解它应该的样子。是 Chrome 无法正确呈现。

【问题讨论】：

这确实需要一个显示问题的公共测试用例。
@Rik 好的，我在这里部署了我的代码：laf.devign.nl/items/new 使用 user1@example.com 登录，密码是“secret”（没有“”）。您将看到 2 个上传字段。底部的看起来不错，但这实际上是通过不可靠的 css hack 完成的。如您所见，这甚至不适用于排名靠前的人。这有帮助吗？
尝试删除所有应用于 FilePond 的自定义样式。我认为“最大高度：1000000px；”有一个 * 选择器很奇怪，不确定是否相关，但我会删除它。 “身高：2.1875rem；” .custom-file-input 上的样式阻止它显示任何文件。
@Rik，该提示帮助我解决了我的问题，谢谢！ ????

标签： javascript css css-transforms filepond

【解决方案1】：

页面是否可能缺少其 doctype 声明？

<!doctype html>

【讨论】：

哦，我忘了在我的问题中提到这一点。我知道这是常见的错误，这不是我的问题。我在我的页面上包含了。为了确定，我也尝试过小写。

【解决方案2】：

感谢Rik's comment，我开始寻找适用于<input type="file" /> 元素和Filepond 转换文件输入后生成的所有html 的css 规则。

这是我发现干扰的所有 css：

就像 Rik 说的，代码中有一条奇怪的 css 规则：* { max-height: 1000000px; }。这是造成文件池 div 渲染太短的原因，如我的 OP 中的屏幕截图所示。 _{（在我的辩护中，我没有写那个规则，css是团队里的其他人给我的?）}
除此之外，我的表单是从引导模板生成的，因此我的文件输入是使用 <input type="file" class="custom-file-input" /> 类生成的。

在从文件输入文件中删除该 css 规则和该类之后，Filepond 最终在所有浏览器中正确呈现。

【讨论】：