Firefox CSS 出现问题，我该如何解决？

Question

在 Chrome 中运行良好并且所有 CSS 都是内联的 - 在同一行中但在 Firefox 中它由于某种原因搞砸了。

这是它在 Firefox 中的样子：

我是 Firefox 的新手 CSS，我尝试使用 CSS 并搜索如何在 Firefox 中使用 CSS 但我没有成功修复它。

有人知道如何在 Firefox 中修复它吗？

我的html:

<template>
  <div class="object-document">
    <div class="document-icon">
      <i
        v-if="document.fileType == fileType.Document"
        class="el-icon-fa-file-o"
      ></i>
      <i
        v-if="document.fileType == fileType.Image"
        class="el-icon-fa-file-image-o"
      ></i>
      <i
        v-if="document.fileType == fileType.Video"
        class="el-icon-fa-file-video-o"
      ></i>
    </div>
    <div
      class="document-name"
      :title="document.dateModified + ' ' + document.name"
    >
      <span>{{ document.name }}</span>
    </div>
    <div class="document-btns">
      <el-button-group>
        <a class="el-button" :href="getDownloadDocUrl(document, true)">
          <i class="el-icon-fa-download"></i>
        </a>
        <a
          class="el-button"
          target="_blank"
          :href="getDownloadDocUrl(document)"
        >
          <i class="el-icon-fa-eye"></i>
        </a>
        <a class="el-button" v-if="visibleForUser(userRoleId)">
          <i class="el-icon-delete"
          @click="showDeleteDialog(document)"></i>
        </a>
      </el-button-group>
    </div>
  </div>
</template>

css:

.object-document {
  display: flex;
  position: relative;
  line-height: 23px;

  & > .document-icon {
    padding-right: 5px;
  }

  & > .document-name {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 50px;
    white-space: nowrap !important;
  }

  & > .document-btns {
    & > .el-button-group {
      & > a {
        padding: 2px 3px !important;
      }
    }
  }
}

Answer 1

一般来说，有一些属性在Firefox 中不起作用，但在其他浏览器中起作用。在下面的 link 中，您会找到所需的所有信息。检查您的代码中是否有 link 中提到的某些属性。如果是，请调整它们。

对于许多属性，您必须使用 -moz 前缀才能在 Firefox 中使用。目标是为 Firefox 定义正常的 CSS 规则和相同的 CSS 规则。浏览器会自行决定采用哪种规则。

或者您可以在 Firefox 中使用 devtools 检查 CSS 并找出未应用哪些 CSS 规则。然后看看 Firefox 的规则必须是什么样子并按照描述扩展它们。

Link 包含所有信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

Firefox CSS 出现问题，我该如何解决？

Firefox CSS is messed up how can i fix it?

css

firefox