我在使用单个组件（简单的DropZone）时遇到了一个问题。然而，它在Chrome上运行良好，它的CSS也很好。

CSS

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
}

.inputDnD {
  .form-control-file {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 6em;
    outline: none;
    visibility: hidden;
    cursor: pointer;
    background-color: #c61c23;
    box-shadow: 0 0 5px solid currentColor;
    &:before {
      content: attr(data-title);
      position: absolute;
      left: 0;
      width: 100%;
      min-height: 6em;
      line-height: 2em;
      padding-top: 1.5em;
      opacity: 1;
      visibility: visible;
      text-align: center;
      border: 0.25em dashed currentColor;
      transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
      overflow: visible;
    }
    &:hover {
      &:before {
        border-style: solid;
        box-shadow: inset 0px 0px 0px 0.25em currentColor;
      }
    }
  }
}

// PRESENTATIONAL CSS
body {
  background-color: #1F1F1F;
}

问题：问题出在Firefox上，它无法显示。我已经应用了CSS，但不确定是否正确添加了CSS.

如果有人有任何关于火狐由于位置而无法显示的想法，请帮助我。谢谢你的时间。

顺晟科技：

问题在于无效的CSS：

 // PRESENTATIONAL CSS

，Firefox CSS解析器将无法从错误中恢复。我的经验是，Firefox将在下一个;或}，以绕过遇到的错误。

解决方案当然是使用CSS注释：

/* PRESENTATIONAL CSS */

更新：

检查控制台（在Firefox中）会发现其他错误：

<代码>.InputDnd{.form-control-file{

显示.inputDnD { .form-control-file { 不是有效的CSS属性名。微软边缘，也是一个WebKit浏览器，证实了CSS有效性的多个问题。我建议在继续之前更正CSS.