Question

修改：根据您的评论略微更新了代码。

我试图使用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（All on Windows 10 Enterprise 64-Bit）上，此代码也能正常工作。

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

Answer 1

问题在于隐藏的边框和填充。如果总和小于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;
    }

Firefox切断了桌面的底部

1 个答案: