边框和内容之间的奇怪空白

Question

我只在特定 px（屏幕尺寸）处看到 div 边框和 chrome 中的导航之间的空白区域。我也在小提琴中看到它，所以我没有任何额外的代码。http://jsfiddle.net/u13f2xwd/ 在 stackoverflow 中的运行代码片段中也会发生同样的情况，只有当我将其展开到整页时才会看到空白。

*{
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
}
div{
  min-height: 100vh;
  border: 0.5vw solid red;
  width: 100%;
  box-sizing: border-box;
}
nav{
  background: black;
  height: 11vh;
}

<div>
  <nav>
  </nav>
</div>

Answer 1

问题是这样的：

border: 0.5vw solid red;

这并没有给你一个整数，因为它用白色 DIV 消除了边框的锯齿，你可能会看到橙色多于白色。

我想出了一个技巧，有 2 个独立的 div，其中一个用于导航，并且该 div 背景是黑色，因此您的边框是黑色而不是白色的抗锯齿。

小提琴： http: //jsfiddle.net/dg45wfc8/

border: 0.5vw solid red;

*{
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
}
.content-div {
  min-height: calc(((100vh - 11vh) - 0.5vw));
  border: 0.5vw solid red;
  width: 100%;
  box-sizing: border-box;
  
  border-width: 0 0.5vw 0.5vw 0.5vw;
  border-style: solid;
  border-color: red;
}

nav{
  background: black;
  height: 11vh;
}

.nav-div {
 border-width: 0.5vw 0.5vw 0 0.5vw;
 border-style: solid;
 border-color: red;
 background: black;
}