CSS display:grid移动端/小屏莫名出现边框问题排查与解决

那些看起来像边框的细线条根本不是你设置的border，而是Chrome在小屏幕下处理Grid布局时的亚像素渲染bug，我来给你拆解清楚：

问题成因 #

你给Grid容器设了width: 50%，再加上8列auto的布局，在某些移动端屏幕尺寸下，浏览器计算出的列宽会是非整数像素（比如12.4px这种）。Chrome为了填满容器的总宽度，会在列与列之间产生极其细微的间隙，容器的背景色（#969596）就会透过这些间隙露出来，看起来就像灰色的边框。

能不能隐藏？当然可以！ #

下面几个办法都能解决这个问题，你可以根据自己的需求选：

办法1：触发GPU渲染，消除亚像素间隙 #

给每个grid-item加上触发GPU加速的属性，让浏览器用更精确的方式渲染元素，直接干掉那些伪边框：

.grid-item {
  background-color: rgba(...); /* 你原来的背景色 */
  backface-visibility: hidden;
  /* 或者用这个也行：transform: translateZ(0); */
}

办法2：改用更稳定的Grid列定义 #

把grid-template-columns里的8个auto换成repeat(8, 1fr)，让列宽均匀分配，避免auto带来的非整数像素计算问题：

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 替换原来的8个auto */
  background-color: #969596;
  margin: 0 auto;
  width: 50%;
}

如果你的列需要自适应内容，也可以用minmax(auto, 1fr)来平衡灵活性和稳定性。

办法3：用透明边框覆盖间隙 #

给grid-item加一个透明的边框，把亚像素间隙彻底盖住，容器背景色就透不出来了：

.grid-item {
  background-color: rgba(...);
  border: 1px solid transparent;
}

这个办法简单粗暴，适合不想改布局逻辑的场景。

办法4：消除容器背景色（特定场景可用） #

如果设计允许，把grid-container的background-color去掉，换成和grid-item相同的背景色——这样就算有间隙也看不出来，不过这是治标不治本的办法，只适合特定需求。

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