HTML 渲染大小差异（Chrome 和 FireFox）

【问题标题】：HTML Render Size Difference (Chrome and FireFox)HTML 渲染大小差异（Chrome 和 FireFox）
【发布时间】：2020-11-25 05:47:43
【问题描述】：

我正在使用 bootstrap 4 设计一个界面。

在 Chrome 和 FireFox 中预览页面时，我注意到页面大小存在巨大差异。 Chrome 显示/渲染整个页面比 FireFox 大得多。这包括字体大小和所有 UI 元素。

我想知道为什么会这样？以及如何强制浏览器保持一个/标准尺寸？

更新：我只是在两个浏览器中访问了https://getbootstrap.com 并注意到同样的事情，在 Chrome 中它更大并且视口覆盖更少的网页。另一方面，FireFox 显示更小/正常的视图并覆盖更多的首屏。

【问题讨论】：

我试过了，我看到的唯一区别是字体，在 Firefox 中更轻。通常，在设计网页时，统一浏览器结果的关键是包含一个重置脚本。在选择字体时，最好坚持每个人都在他们的电脑上使用的字体，或者使用可以在任何浏览器上加载的网络字体

【解决方案1】：

浏览器有不同的字体大小设置。差异就像 1,25。所以 10px Chrome 在 Firefox 上变成 12,5px。您可以更改此 chrome/settings/appearance。

display: flex 到父组件，扩展父组件的全部可用高度。

在父组件上：position: relative,

关于孩子：position: absoluteheight: 100%width: 100%

【讨论】：

感谢您的帮助，但这不是我想要的。首先，我不想更改浏览器设置，因为用户不会这样做来查看我的网站。关于使用 flex 的第二个建议可能会有所帮助，但我仍然在界面中有无数组件，而不仅仅是按钮，因此无法使用 flex 重新创建所有内容
我在我的项目中使用 normalize.css。我强烈推荐使用它。您可以分配默认字体大小。 normalize.css：necolas.github.io/normalize.css