GridView出现异常线条：是CSS、边框问题还是其他原因？

嘿，这种和缩放挂钩的“幽灵线条”我碰到过好多次了！大概率是浏览器亚像素渲染或者元素尺寸/边框计算时的浮点精度问题搞的鬼——毕竟缩放页面时，浏览器会把原本的整数像素转换成非整数的物理像素，这种模糊计算很容易挤出奇怪的伪线条。

下面给你几个针对性的解决方案，你可以挨个试试：

• 强制整数像素对齐：给GridView的行或单元格加CSS，强制元素的尺寸、位置用整数像素，避免浏览器插值计算：

  .grid-view-row, .grid-view-cell {
    transform: translateZ(0); /* 触发硬件加速，帮助浏览器对齐像素 */
    position: relative;
    top: 0;
    left: 0;
  }
  /* 如果是固定列数的GridView，可以直接用calc确保宽度为整数 */
  .grid-view-cell {
    width: calc(100% / 你的列数);
    box-sizing: border-box;
  }
  

• 替换边框为轮廓线：如果选中行的右边框是嫌疑对象，试试用outline替代border——outline不占用布局空间，不会因为缩放时的布局计算误差出现线条：

  .grid-view-row.selected {
    border-right: none;
    outline: 2px solid #你的青蓝色选中色;
  }
  

• 关闭亚像素渲染：针对GridView容器禁用亚像素渲染，不过这个要谨慎用，可能影响其他元素的平滑度：

  .grid-view {
    image-rendering: crisp-edges;
    shape-rendering: crispEdges;
  }
  

• 检查背景溢出与内边距：有时候选中行的背景色会因为overflow或非整数内边距在缩放时露出缝隙，试试调整：

  .grid-view-row.selected {
    overflow: hidden;
    padding: 8px 12px; /* 确保内边距是整数像素值 */
  }
  

另外，你还可以打开Chrome DevTools的「Layers」面板，看看选中行的图层有没有合成异常——有时候图层叠加也会导致这种诡异的线条。如果上面的方法都没用，给GridView的父容器加个transform: scale(1)触发硬件加速，也可能解决渲染bug。

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