Chrome和Firefox中呈現的文字容器寬度大小不同

Question

為什麼容器寬度在 Chrome 和 Firefox 中呈現為不同的尺寸？ 圖像樣本。 Chrome：渲染寬度為681.273

FireFox：渲染寬度為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>

在兩種瀏覽器中打開以下鏈接，您將看到差異。

這是一個jsfiddle

有沒有辦法在兩個瀏覽器中以相同的寬度渲染？

Answer 1

問題原因：

• 不同的預設樣式：Chrome 和 Firefox 都有自己不同的 HTML 元素預設樣式。
• 兩種瀏覽器處理 css 的方式存在差異：兩者都有自己的渲染引擎，因此它們處理 css 屬性的方式可能不同。

問題的解決方案

• #使用css reset：css重設是一組樣式，移除瀏覽器的預設樣式，什麼是 css 重設。

• 使用 CSS 供應商前綴：它們是 css 屬性的前綴，用於使 css 屬性支援該瀏覽器，CSS 供應商前綴

#