时间戳

首页 > 解决方案 > 放大页面会破坏 Firefox 中的布局，但不会破坏 Chrome

css - 放大页面会破坏 Firefox 中的布局，但不会破坏 Chrome

问题描述

我制作的网页在未缩放时在 Chrome 和 Firefox 中运行良好，但是，缩放会破坏 Firefox 中的布局（但由于某种原因，在 Chrome 中不是）。你可以看到现场版。
这是它在 Firefox 中的样子： 然而，当放大时，它看起来像这样： 这是该网页的 CSS 代码：
未放大时的 Firefox
放大时的 Firefox

body {
  font-family: sans-serif;
}

#format_as_code {
  font-family: "Lucida Console", monospace;
  font-size: 12px;
  white-space: pre;
  width: calc(80 * 7.2px);
  background: #111111;
  color: #eeeeee;
  height: calc(24 * 14.5px);
  display: block;
}

h1 {
  text-align: center;
}

#center {
  margin-left: auto;
  margin-right: auto;
  width: calc(80 * 7.2px);
}

知道我做错了什么吗？

标签： cssfirefox

解决方案

只要我能看出即使在 Firefox 中放大也不会破坏布局（请参见下面的屏幕截图）。也许您可能想从 中删除宽度<span id = "format_as_code">或将其设置为 auto 以查看是否有任何变化。
表演的快速提示思想：我注意到每秒钟所有跨度（我认为代表画布的像素）都会更新，即使是那些根本不改变的！
这会导致性能明显下降，因此可能需要对其进行研究。
我将附上我如何查看该网站以及它如何在 FF 79 64 位上呈现的屏幕截图。
希望这对您有所帮助！

推荐阅读