Text container width sizes rendered in Chrome and Firefox are different

Question

Why do container widths render as different sizes in Chrome and Firefox? Image sample. Chrome: Render width is 681.273

FireFox: Render width is 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>

Open the following links in both browsers and you will see the differences.

This is a jsfiddle

Is there a way to render with the same width in both browsers?

Answer 1

problem causes:

• Different default styles: Chrome and Firefox have their own different default styles for HTML elements.
• There are differences in the way the two browsers handle css: Both have their own rendering engines, so they may handle css properties differently.

Solution to the problem

• Using css reset: css reset is a set of styles that removes the browser's default style, What is css reset.

• Use CSS vendor prefixes: They are prefixes for css properties that are used to make css properties support this browser, CSS vendor prefixes