时间戳

首页 > 解决方案 > Html 元素不在 FireFox 上显示，但在 Chrome 上显示

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

问题描述

我被困在一个问题上，我正在使用单个组件（简单的 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 由于位置不显示有任何想法，请帮助我。谢谢你的时间。

标签： javascripthtmlcss

解决方案

问题在于无效的 CSS：

 // PRESENTATIONAL CSS

body如果不消耗为元素提供背景颜色的下一行，Firefox CSS 解析器不会从错误中恢复。我的经验是，Firefox 将在下一次之后恢复解析，;或者可能}是为了绕过遇到的错误。

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

/* PRESENTATIONAL CSS */

更新：

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

.inputDnD {
   .form-control-file {

表明这.form-control-file {不是一个有效的 CSS 属性名称。Microsoft Edge，也是一个 webkit 浏览器，确认了 CSS 有效性的多个问题。我建议在继续之前更正 CSS。

推荐阅读