边框和内容之间出现奇怪的白色空隙。

Question

我在Chrome浏览器的特定屏幕尺寸下，看到div边框和导航之间存在空白。我在fiddle中也可以看到这种情况，因此我没有写任何额外的代码。 同样的情况也发生在片段中，只有当我将其展开至全屏时才会看到白色空间。

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

- ivaylo

Answer 1

问题是这样的：

border: 0.5vw solid red;

如果边框不是整数像这样，它会用白色 DIV 反锯齿化边框，您可能看到的是橙色而不是白色。

我想到了一个方法，通过使用两个单独的 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>

- John

---

我知道抗锯齿，但我不知道它发生在相邻的物体之间。什么是模数，为什么我找不到有关它和浏览器支持的任何信息？ - ivaylo

哦，这基本上是取模运算符吗？但这是我第一次在CSS中看到它？ - ivaylo

但是当我在jsfiddle中尝试时它是有效的，但我也认为它不是有效的css。你是如何想到首先使用border-width: mod(0.5vw, 1px)的？ - ivaylo

是的，一样。但我不认为vw是问题，因为web px并不是真正的屏幕px？因此即使没有视口单位，抗锯齿仍然会发生。 - ivaylo

我想出了一个解决方案，尽管它是一个丑陋的hack。 - John

Answer 2

您可以添加margin-top:-1px来移除带边框的div下方的空白间隙。我使用这种方法来解决我的空白间隙问题，它很有效！

<div> test </div>

div{
    border: 3px solid #FB982E;
    margin-top: -1px;
}

- Thakur Jyoti

Answer 3

问题出在你使用的单位vw上。当我将其改为px时，白色间隙消失了。

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

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

- thelovekesh

---

我理解您的意思是，白色空间是指边框和内容之间的空隙。我在您提供的示例中仍然看到了这个空间。 - ivaylo

问题出在您所使用的测量单位上。 - thelovekesh

只有在特定的屏幕尺寸下才会出现这种情况，也许可以尝试放大或缩小屏幕。或者将像素大小更改为其他尺寸。 - ivaylo

我已经在许多不同分辨率的屏幕上尝试过了，结果都是一样的。 - thelovekesh

@LovekeshKumar，你发布的答案代码有一个错误，你发布的代码是11vh而不是11px。只是想让你注意一下...也许@ivaylo复制粘贴了带有错误的代码。 - Nishant S Vispute