La taille de la largeur du conteneur de texte est différente lorsqu'elle est rendue dans Chrome et Firefox

Question

Pourquoi les largeurs des conteneurs s'affichent-elles sous des tailles différentes dans Chrome et Firefox ? Échantillon d'image. Chrome : la largeur de rendu est de 681,273

FireFox : la largeur de rendu est de 685,8499

*{
  margin: 0px;
  padding: 0px;
}
div {
    font-size: 20px;
    font-family: 'Arvo';
    max-width: 824px;
    text-transform: none;
    letter-spacing: 0em;
    line-height: 1.2;
    word-break: break-word;
    width: max-content;
    height: auto;
    position: relative;
    top: 50px;
    left:20px;
    outline: red solid 1px;
    color: black;
    -webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;
}

p { 



}

<style>
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
</style>
<div id="div-main-con">
  <p>
    What are we A team? No, no, no. We're a chemical mixture that makes 
  </p>
</div>

<p id="temp-con">

</p>


<script differ>
elm = document.getElementById('div-main-con')

document.getElementById('temp-con').innerText = `the below container width is  ${elm.getBoundingClientRect().width}`

</script>

Ouvrez les liens suivants dans les deux navigateurs et vous verrez les différences.

C'est un jsfiddle

Existe-t-il un moyen d'afficher avec la même largeur dans les deux navigateurs ?

Answer 1

Cause du problème :

• Différents styles par défaut : Chrome et Firefox ont leurs propres styles par défaut pour les éléments HTML.
• Il existe une différence dans la façon dont les deux navigateurs gèrent les CSS : les deux ont leurs propres moteurs de rendu, ils peuvent donc gérer les propriétés CSS différemment.

Solution au problème

• Utilisation de CSS reset : la réinitialisation CSS est un ensemble de styles qui supprime les styles par défaut du navigateur, Qu'est-ce que la réinitialisation CSS.

• Utiliser les préfixes du fournisseur CSS : ce sont des préfixes pour les propriétés CSS qui sont utilisés pour que les propriétés CSS prennent en charge ce navigateur, Préfixes du fournisseur CSS