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

Question

我制作的网页在未缩放时在 Chrome 和 Firefox 中运行良好，但是，缩放会破坏 Firefox 中的布局（但由于某种原因，在 Chrome 中不是）。你可以看到live version。
这是 Firefox 中的样子：

但是，放大后，它看起来像这样： 这是该网页的 CSS 代码：

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);
}

知道我做错了什么吗？

Answer 1

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