为什么我的 CSS 网格容器偏移了 1 个像素？

Question

当我在 Chrome DevTools 中检查我的布局网格容器时，我的网格似乎被向右推了 1 个像素。我可以看到网格的左侧边框，但右侧边框在屏幕外。

问题截图：

导致此问题的原因可能是什么？

我有以下全局 css:

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

以及以下 CSS 我的网格容器：

.container {
  background-color: #F5F6F9;
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 100px minmax(1080px, 1fr) 100px;
  grid-template-rows: 75px minmax(150px, 1fr) 75px;
  grid-template-areas: 
  "header header header"
  ". main ."
  "footer footer footer";
}

我想也许将 box-sizing: border-box 添加到全局 css 会解决问题，但没有任何改变。

Answer 1

我不知道这是否是您正在寻找的解决方案，但是 HTML body 有一个安全的 space 8px 作为边距。所以当你设置 margin: 0px; ，您还删除了保险箱 space。但是，您始终可以将 margin-right 设置为 1px，这样您就可以看到边框。

强制方法，改变你的body保证金：

html, body {
  height: 100%;
  padding: 0;
  margin: 0px 1px 0px 0px;
  box-sizing: border-box;
}

为什么我的 CSS 网格容器偏移了 1 个像素？

Why is my CSS Grid container off by 1 pixel?

css

browser

frontend

css-grid

display