Firefox CSS is messed up how can i fix it? - css

Question

In Chrome it's working good and all the CSS is inline - in the same line
but in Firefox it's messed up for some reason.
This is how it looks in Firefox:
I'm new to Firefox CSS, I have tried to play around with the CSS and search how to use CSS in Firefox but i did't succeed to fix it.
Is some one know how to fix it in Firefox ?
My 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

In general, there are some attributes that don't work in Firefox, but work in other browsers. In the link below you will find all information you need. Check if you have some attributes in your code which are mentioned in the link. If so, adjust them.
For many attributes you have to use -moz prefix so they work in Firefox. The goal is to define both, the normal CSS rule and the same CSS rule for Firefox. The browsers will decide by themselves, which rule to take.
Alternatively you can check you CSS with devtools in Firefox and find out, which CSS rules are not applied. Then look, what the rules have to look like for Firefox and extend them, as described.
Link with all information: https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions