在移动屏幕上居中模式叠加的问题

Question

我正在开发一个网站，其结构如本代码笔所示。 模态测试。在codepen中，当我打开Chrome开发工具并切换设备工具栏以查看网站如何在移动屏幕上运行时，似乎没有任何问题，但如果我将其作为本地html页面（链接了CSS和JS）打开，在该模式下，模态框不在屏幕中央。 Firefox 也有同样的问题（但是我注意到，只要我在 Firefox 中关闭触摸模拟，模式就会居中，打开它就会使其不居中。）

function showModal() {
    if (modalVisible) return;

    modalVisible = true;
    modal.style.display = "flex";
    document.body.appendChild(modal);
  }

我试图找出如何使模式在屏幕上居中，同时又不滚动离开其下方的内容，但我就是找不到问题。

Answer 1

当我打开本地 html 代码时，我在中心看到模态。

也许您忘记在浏览器中禁用缓存？您看到了代码的先前版本吗？

如何在 Chrome 中禁用缓存