简单Dropzone组件Chrome正常显示但FireFox不显示的兼容问题求助

问题根因及修复方案 #

以下是代码中导致Firefox兼容问题的几个核心原因，按优先级排序修复即可：

• 修复无效的box-shadow属性写法
  你代码中.form-control-file下的box-shadow: 0 0 5px solid currentColor;属于语法错误，box-shadow属性不需要传入border样式的solid关键字。Chrome内置了样式容错机制会自动忽略无效字段，Firefox会直接判定整条属性失效，修改为box-shadow: 0 0 5px currentColor;即可。

• 修正替换元素伪元素的兼容逻辑
  Firefox对<input type="file">这类替换元素的::before/::after伪元素支持度远低于Chrome，你当前隐藏原input、靠input伪元素渲染拖拽区域的实现逻辑在Firefox中会直接失效。
  建议调整DOM结构：新增一个独立的div作为拖拽区域的视觉载体，把原input设为opacity: 0、绝对定位铺满整个视觉载体，既保留input的原生文件选择、拖拽能力，也能保证不同浏览器的样式表现一致。

• 编译嵌套CSS为标准语法
  你提供的代码是SASS/LESS的嵌套写法，若没有经过预编译直接在浏览器中运行，大部分版本的Firefox完全不支持原生CSS嵌套，会导致所有嵌套内的样式失效。需要把嵌套结构展开为标准CSS：

/* 编译后的标准CSS写法参考 */
.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 currentColor;
}
.inputDnD .form-control-file::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;
}
.inputDnD .form-control-file:hover::before {
  border-style: solid;
  box-shadow: inset 0px 0px 0px 0.25em currentColor;
}

• 补全绝对定位的依赖样式
  你用position: absolute + transform实现.container的居中效果，Firefox中百分比定位的计算严格依赖父元素的明确高度，如果html、body未设置高度，会导致.container的top: 50%计算值为0，组件直接偏移到视口外。可以在全局样式中添加：

html, body {
  height: 100%;
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Suhail Mumtaz Awan