Die Breite des Textcontainers unterscheidet sich beim Rendern in Chrome und Firefox

Question

Warum werden Containerbreiten in Chrome und Firefox in unterschiedlichen Größen dargestellt? Bildbeispiel. Chrome: Die Renderbreite beträgt 681,273

FireFox: Die Renderbreite beträgt 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>

Öffnen Sie die folgenden Links in beiden Browsern und Sie werden die Unterschiede sehen.

Das ist eine jsfiddle

Gibt es eine Möglichkeit, in beiden Browsern mit der gleichen Breite zu rendern?

Answer 1

问题原因：

• 不同的默认样式：Chrome 和 Firefox 都有自己不同的 HTML 元素默认样式。
• 两种浏览器处理 css 的方式存在差异：两者都有自己的渲染引擎，因此它们处理 css 属性的方式可能不同。

问题的解决方案

• 使用css reset：css重置是一组样式，去除浏览器的默认样式，什么是 css 重置。

• 使用 CSS 供应商前缀：它们是 css 属性的前缀，用于使 css 属性支持该浏览器，CSS 供应商前缀