导航栏flex容器边框与flex子项边框间1像素间隙的原因及解决方法

这种1像素间隙基本是浏览器的亚像素渲染偏差导致的——当布局计算出现小数像素时，浏览器的四舍五入处理会造出视觉上的缝隙。试试下面几个实用方案：

• 触发GPU加速修正渲染：给flex容器加transform: translateZ(0)，让浏览器用GPU的精确像素渲染逻辑，规避亚像素偏差：

  .grid-container { 
    /* 原有样式保留 */
    transform: translateZ(0);
  }
  

• 消除字体基线影响：给flex容器设置font-size: 0，再在子项里重置回需要的字号（比如16px），避免内联元素的基线对齐产生微小间隙：

  .grid-container { 
    /* 原有样式保留 */
    font-size: 0;
  }
  .grid-item {
    /* 原有样式保留 */
    font-size: 16px;
  }
  

• 截断溢出像素：给flex容器加overflow: hidden，如果间隙是容器边缘的渲染溢出导致的，这个方法能直接截断多余像素：

  .grid-container { 
    /* 原有样式保留 */
    overflow: hidden;
  }
  

• 显式对齐方式：确认flex容器的align-items值，默认是stretch，如果子项有自定义高度，显式设置align-items: stretch或匹配子项的对齐方式，避免对齐偏差：

  .grid-container { 
    /* 原有样式保留 */
    align-items: stretch;
  }
  

修改后的完整代码示例（以GPU加速方案为例）：

* { margin: 0; padding: 0; box-sizing: border-box; }
.grid-container { 
  display: flex; 
  border: 2px solid red; 
  justify-content: end; 
  gap: 1rem; 
  margin: 0; 
  padding: 0;
  transform: translateZ(0);
}
div { margin-top: 0; margin: 0; padding: 0; display: block; }
.logo { margin-right: auto; }
.grid-item { border: 2px solid red; }
a { text-decoration: none;}

<nav class="grid-container">
  <div class="logo grid-item">
    <a href="#">logo</a>
  </div>
  <div class="about grid-item">
    <a href="#">about</a>
  </div>
  <div class="home grid-item">
    <a href="#">home</a>
  </div>
  <div class="contact grid-item">
    <a href="#">contact</a>
  </div>
  <div class="search grid-item">
    <a href="#">search</a>
  </div>
</nav>

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