Question

我正在尝试创建拖放文件功能，我从下面的链接中获取了参考代码，但是问题是我在Firefox和IE中看不到我的Drop元素。

Firefox Version i have: 57.0.2

Reference  Code Used:

Answer 1

Living Standard（又称官方网络标准的最新版本）指出，<input>标签可以包含以下内容：无。

这种类型的标签也称为“空标签” ，“空元素” 或“无效标签” 。可以找到完整列表here。它们不能包含任何内容，包括pseudo-elements。

我不知道Chrome为什么以及何时开始在<input>上允许内容，但是根据生活标准，它不应该。因此，正常的行为是其他两种浏览器之一。

如果您希望代码在所有浏览器中都能工作，则前提是必须具有有效的标记。

我还应该补充一点，原则上，即使当前浏览器比其他具有特定类型无效性的浏览器更宽松，但一个体面的开发人员也不应该期望它能够持续使用。除非标准更改，否则您应该期望Chrome很快在<input>上禁止内容。

Answer 2

关于您放置元素的文件输入；代码的作用是隐藏 real 输入并使用输入的：before sudo-element进行漂亮的显示。

firefox不会在输入之前渲染:: before

chrome在输入上渲染:: before

chrome将输入呈现为容器没有问题，因此：before＆：after输入可以在chrome上使用。但是IE＆firefox无法将输入识别为容器。因此样式不适用。有关更多信息，请参见This Post。