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

Question

我只在特定 px(屏幕尺寸)处看到 div 边框和 chrome 中的导航之间的空白区域。我也在 fiddle 中看到它，所以我没有任何额外的代码。 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 消除了边界的锯齿，你可能看到的是橙色而不是白色。
我想出了一个 hack，有 2 个单独的 div，一个用于导航，div 背景是黑色的，所以你的边框是黑色的抗锯齿而不是白色。
fiddle :http://jsfiddle.net/dg45wfc8/

*{
  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;
}

<div class="nav-div">
  <nav>
  </nav>
</div>
<div class="content-div">>
</div>