在 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

問題原因：

• 不同的默認值 styles ：Chrome 和 Firefox 對於 HTML 元素都有自己不同的默認值 styles。
• 兩種瀏覽器處理 css 的方式不同：兩者都有自己的渲染引擎，因此它們可能以不同的方式處理 css 屬性。

問題的解決方案

• 使用 css reset ： Css reset 是去掉瀏覽器默認的 styles 的一組 styles ，什么是 css reset 。

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