HTML 未在 Firefox 和 IE 上显示答案

【问题标题】：HTML not showing up on Firefox and IEHTML 未在 Firefox 和 IE 上显示
【发布时间】：2019-02-01 13:50:25
【问题描述】：

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

Firefox Version i have: 57.0.2

Reference  Code Used:

【问题讨论】：

您的放置元素表示“添加图像”按钮和“拖放文件”框？
是的，用户可以点击按钮选择文件，也可以直接拖动。
如果您可以在 Chrome 中打开上述 URL，您将看到 drop-box 元素，但如果您在 Firefox 或 IE 中打开，则不会显示 drop 元素。我不明白确切的问题。

【解决方案1】：

Living Standard（也就是官方网络标准的当前版本）声明<input> 标签可以包含以下内容：Nothing。

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

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

如果您希望您的代码在所有浏览器中都能正常工作，前提是要有有效的标记。

我还应该补充一点，原则上，即使浏览器当前比其他具有特定类型无效性的浏览器更宽容，一个体面的开发人员也不应该期望它持续下去。除非标准发生变化，否则您应该期望 Chrome 很快就不会允许 <input>s 上的内容。

【讨论】：

【解决方案2】：

这与您的放置元素的文件输入有关；代码的作用是隐藏 real 输入并使用输入的 :before sudo-element 制作漂亮的视图。

firefox 不会在输入上呈现 ::before

chrome 在输入上呈现 ::before

chrome 在将输入渲染为容器时没有问题，因此输入的 :before 和 :after 可以在 chrome 上工作。但 IE & firefox 不将输入识别为容器。所以样式不适用。请参阅This Post 了解更多信息。

【讨论】：