Html 浏览器缩放级别断开底部和左/右页面边框的连接

对于笔记本电脑上的Chrome 79/Firefox 72，Linux Mint 18，24英寸连接显示器

我发现了类似但不完全相同的问题。最接近的实例是：

这个问题建议禁用缩放。我不知道怎么做

否则，就我而言：

桌面Web浏览器的缩放级别会断开手动编辑网页的2em底部和左/右边框

我一直使用em或%相对单位

上边框和左右边框不受缩放级别的影响

下面的屏幕截图说明了该行为

• 在Chromium（Linux上为79）中，90%==无间隙，80%==间隙
• 在Firefox（Linux上为72）中，110%==无差距，100%==差距

以下是在页面周围创建2em边框的CSS：

body:before,
body:after {
  content: "";
  position: fixed;
  background: #008800;
  left: 0;
  right: 0;
  height: 2em;
}

body:before {
  top: 0;
}

body:after {
  bottom: 0;
}

body {
  margin: 0em;
  border-left: 2em solid #008800;
  border-right: 2em solid #008800;
  padding: 3em 3em 3em 4em;
  background-color: #dddddd;
}

• 还有一些CSS可以抑制较小的移动屏幕或桌面屏幕上的边框。我没有包括它，因为我不相信它会影响问题（？）

• 我尝试使用两种浏览器的开发工具来隔离问题，但都没有成功

---

2020-02-12编辑：

我试图解释针对我的原始帖子所提供的评论。他们都提到了百分比单位（%）。不幸的是，我根本无法让百分比单位工作。使用%删除边框，我无法使HTML页面的H/F div进入页面顶部；有个缺口

---

因此，代替指导，我可以更清楚地理解我现在把它放在一边…

如果你将宽度设置为百分比而不是固定宽度，它将在缩放时自动收缩，而不会中断，或者可能是相反的，所以尝试两者。你的CSS接缝有点“粗糙”，为什么要使用

主体

来添加样式，而不是其中的容器。为什么使用

em

而不使用百分比呢？感谢bestinamir和Matan Sanbira，但根据我对原始问题的编辑：我已经尝试在不同的地方放置%单位。结果是H/F div在顶部/底部有间隙。以前的2em边界完全消失。所以我现在把这个放在一边。。。