为什么flexbox布局的表格部分行边框与内容之间存在间隙？

间隙产生原因 #

该间隙是浏览器亚像素（小数像素）渲染对齐导致的：flex容器的高度、边框计算值出现小数时，子元素的背景和父元素边框的渲染逻辑存在差异，就会出现偶发的1px间隙，页面有缩放、父元素存在非整数偏移时该现象会更明显。你给整行设置背景色时没有间隙，是因为背景和边框属于同一个元素，渲染时不会出现对齐偏差。

可落地的解决方法 #

你可以根据实际场景选以下任意一种方案修复：

• 给flex行容器添加transform: translateZ(0)，开启GPU渲染强制对齐像素边界，消除亚像素偏差
• 给带背景的.label元素添加margin-bottom: -1px，用负边距覆盖可能出现的间隙区域
• 明确指定flex行的高度为整数，同时给子元素设置height: 100%，避免高度计算出现小数，参考代码如下：

.block {
    display: flex;
    border-bottom: 1px solid black;
    box-sizing: border-box;
    min-height: 44px; /* 明确指定整行高度为整数 */
    .label {
      background-color: blue;
      padding: 10px;
      flex: 1;
      height: 100%;
      box-sizing: border-box;
    }
    .value {
      flex: 1;
    }
  }

• 直接将背景色设置在flex行容器上，这是你已经验证过兼容性最好的方案。

内容的提问来源于stack exchange，提问作者Ms.Tamil