Html元素在FireFox上不显示，但在Chrome上显示

Question

我被困在一个问题上，我正在使用一个单独的组件(简单的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。

如果有人对Firefox由于位置不显示有任何想法，请帮助我。谢谢你的宝贵时间。

Answer 1

问题在于无效的CSS:

// PRESENTATIONAL CSS

Firefox CSS解析器不能从错误中恢复，除非使用为body元素提供背景颜色的下一行。我的经验是，Firefox将在下一个;或}之后继续解析，以绕过遇到的错误。

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

/* PRESENTATIONAL CSS */

---

更新:

检查控制台(在Firefox中)会显示额外的错误:

.inputDnD {
.form-control-file {

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