移动设备上的 CSS flexbox 边框

Question

我正在制作一个小型 html/css/js 游戏，它包含在一块板上，上面有几个瓷砖和一个可以在上面移动的小角色。该板是使用 css flexbox 用 div 制作的。

<div class="board">
  <div class="row">
    <div class="cell green"></div>
    ...
  </div>
  ...
</div>

在 Chrome 或 Firefox 等桌面浏览器上，它看起来很棒。但在移动设备（iOS Safari/Chrome 和 Android Chrome）上，它显示了一种边框。最奇怪的是它不是完全规则的：S

我已经设置了一个jsfiddle，所以你可以看到它：

https://jsfiddle.net/igorosabel/jjy1ok3c/

谢谢！

Answer 1

您可以使用小阴影来隐藏该间隙：

.board{
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
}

.row{
  flex: 1;
  display: flex;
  flex-direction: row;
}

.cell{
  flex: 1;
}

.grass{
  background-color: #489848;
  box-shadow:0 0 0 1px #489848; /* because of a white gap that can show on small screens */
}

<div class="board">
  <div class="row">
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
  </div>
  <div class="row">
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
  </div>
  <div class="row">
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
  </div>
  <div class="row">
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
    <div class="cell grass"></div>
  </div>
</div>

https://jsfiddle.net/jjy1ok3c/3/

编辑：我已经在其他地方回答了这个问题，但找不到重复项