Firefox切掉了桌子的底部

Firefox cutting off bottom of table

本文关键字：底部 掉了 Firefox      更新时间：2023-09-26

编辑：根据您的评论稍微更新了代码

编辑2：实时示例：lachniet.com/chessboard

我正在尝试使用HTML、CSS和JS的组合来绘制一个空棋盘。我的CSS和JS内联代码是这样的：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>TitaniumChess</title>
  <style>
html,body {
  margin: 0;
  padding: 0;
}
#board {
  border: 1px solid #000;
  border-collapse: collapse;
  float: left;
  height: 50vw;
  width: 50vw;
}
.tile-white {
  height: 12.5%;
  width: 12.5%;
}
.tile-black {
  background-color: #000;
  color: #fff;
  height: 12.5%;
  width: 12.5%;
}
  </style>
</head>
<body>
<table id="board"></table>
<script>
var board = document.getElementById('board');
var draw = '';
var letters = 'abcdefgh';
for (var column = 8; column > 0; column--) {
  draw += '<tr id="' + column + '">';
  for (var row = 0; row < 8; row++) {
    draw += '<td id="' + letters.charAt(row) + column + '" class="';
    if ((row + column) % 2 == 1) {
      draw += 'tile-black';
    } else {
      draw += 'tile-white';
    }
    draw += '">test</td>';
  }
  draw += '</tr>';
}
board.innerHTML = draw;
</script>
</body>
</html>

现在，这段代码在Chrome 52中对我来说非常适用。然而，在Firefox 47中，最下面的一行被剪掉了。令人惊讶的是，即使在IE 11和Edge 12(全部在Windows 10 Enterprise 64位上(中，这段代码也能很好地工作。

这似乎是Firefox特有的问题。有人知道为什么吗？

问题在于隐藏的边界和填充。如果总和小于100%，浏览器还会重新计算高度。这是css，适用于Edge、FF和GC。

    html, body {
        margin: 0;
        padding: 0;
    }
    #board {
        float: left;
        height: 50vw;
        width: 50vw;
        border: 1px solid #000;
        border-collapse: collapse;
        padding:0;
    }
    #board td{ /*All td are created equal*/
        height: 10%; /*Let browser recalculate*/
        width: 12.5%;
        border:none 0px; /*remove borders explicitly */
        padding:0;
    }
    .tile-white {
    }
    .tile-black {
        background-color: #000;
        color: #fff;
    }

作为奖励，您不需要.tile-black和.tile-white类。

    /*Odd td in even tr and even td in odd tr*/
    #board tr:nth-child(2n) td:nth-child(2n+1),
    #board tr:nth-child(2n+1) td:nth-child(2n)
    {
        background-color: #000;
        color: #fff;
    }
相关文章：