CSS 移动设备上的 flexbox 边框

Question

我正在制作一个小型 html/css/js 游戏，该游戏由一个棋盘组成，棋盘上有几个方块和一个可以在上面移动的小角色。该板是使用 div 使用 css flexbox 制作的。

<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/

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

CSS 移动设备上的 flexbox 边框

CSS flexbox borders on mobile

css

google-chrome

mobile-safari

flexbox