【问题标题】: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: 

https://codepen.io/aaronvanston/pen/dpRkXO

【问题讨论】:

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

标签: html css drag-and-drop dropbox


【解决方案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 了解更多信息。

    【讨论】:

      猜你喜欢
      • 2011-06-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-09
      • 2010-11-05
      • 1970-01-01
      • 1970-01-01
      • 2013-12-18
      相关资源
      最近更新 更多