css - 使用视口(viewport)高度会导致某些屏幕尺寸的某些部分出现像素线

Question

编辑:解决方案 - 我添加了 3 个属性。

section{
    **height: calc(86vh + 2px);**
}
:target {
    display: block;
    position: relative;
    top: -14vh; 
    visibility: hidden;
    **margin-top: 2px;**
}
#spacer{
    width: 100vw;
    height: 14vh;
    position: relative;
    top: 0;
    **margin-bottom: -2px;**
}

这是 fiddle https://jsfiddle.net/JohnWeb/9m2ovuyo/

我正在使用 vh 调整我拥有的 3 个部分的大小。但在某些屏幕尺寸下，它会在前 2 个部分上方留下一条像素线，但第 3 个部分将是正确的尺寸。上次查了14vh + 86vh = 100vh = 100% ...

section{
    height: 86vh;
}

#spacer{
    width: 100vw;
    height: 14vh;
    position: relative;
    top: 0;
}

^ 绿色部分下方和水色部分上方^

Answer 1

由于问题并非出现在所有屏幕上，因此很难给出正确的解决方案，但对于这种情况有一种破解方法。您可以使用负边距留出 2px 的间隙。

#spacer{
  margin-bottom: -2px;
}

和相同的高度，即 2px，你用浅绿色添加到下面的部分，否则它会从底部留下 2px 的间隙。通过这个浅绿色部分将在标题部分下方重叠 2px，这将解决它们之间的任何无条件间隙。 Bootstrap 还使用类似的技术通过创建 15 像素的装订线来消除任何可能的布局错误。