使用Viewport Height导致部分屏幕出现像素线问题及解决方案

最近遇到个头疼的小问题：我用vh单位设置了3个section的尺寸，结果在部分屏幕尺寸下，前两个section上方会莫名其妙出现一条细像素线，第三个section却完全正常，试了好多常规方法都没搞定。

经过一番调试，终于找到了解决方案，给相关元素添加了这几个关键属性：

• 调整section的高度，用calc额外加2px来抵消亚像素渲染的偏差：

section {
  height: calc(86vh + 2px);
}

• 给:target伪类添加margin-top: 2px，修正锚点偏移带来的缝隙：

:target {
  display: block;
  position: relative;
  top: -14vh;
  visibility: hidden;
  margin-top: 2px;
}

• 给#spacer元素设置负的margin-bottom，消除它和下方section的缝隙：

#spacer {
  width: 100vw;
  height: 14vh;
  position: relative;
  top: 0;
  margin-bottom: -2px;
}

其实这种问题大多是因为vh单位在不同屏幕分辨率下会产生小数像素，浏览器渲染时无法完美对齐，就出现了肉眼可见的细缝隙。通过这几处2px的微调，刚好能把这些亚像素缝隙补上，让布局完全贴合。

内容的提问来源于stack exchange，提问作者jFasaJr