4

我对我的 HTML 表格有疑问。我使用 JavaScript 将 8 行和 8 列添加到我用 HTML 定义的表中。我还使用 CSS 来格式化单元格和单元格内的图像。问题是我制作的屏幕越大，与它们后面的静态图像相比，表格单元格大小变得越扭曲（我在棋子后面有一个棋盘图像）。

我已经完成了我可以在网上找到的所有 CSS 技巧来消除不需要的填充等，但似乎没有任何方法可以解决这个问题。偏移是一致且明显的，但它只有大约 2 或 3 个像素。

这是右下角的部分应该位于的位置，以它们的正方形为中心：

这是屏幕很小的时候，右下角的部分在它们的正方形中居中。

这是它们在大屏幕时所处的位置；它们略有偏移：

这是屏幕很大的时候，棋子已经被推到了右边。

这是我的 HTML：

<body oncontextmenu="return false;">
  <div id="Board"></div>
  <table id="Pieces"></table>
</body>

这是JavaScript：

var P = document.getElementById("Pieces");
for (var y = 0; y < 8; y++) {
  P.appendChild(document.createElement("tr"));
  for (var x = 0; x < 8; x++) P.rows[y].appendChild(document.createElement("td"));
}
// in some more complex JS I place an "img" element of each piece in their respective "td"s

这是 CSS，我怀疑这是问题所在：

body {
  font-family: sans-serif;
  user-select: none;
  -moz-user-select: none;
  overflow: hidden;
  --unit: 60px; /* this is set according to screen height with some simple JS */
}
* {
  margin: 0;
  padding: 0;
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  box-sizing: border-box;
}
#Board {
  position: absolute;
  left: calc(50% - var(--unit) * 4);
  top: var(--unit);
  background-image: url("boardWhite.png");
  background-size: calc(var(--unit) * 8) calc(var(--unit) * 8);
  width: calc(var(--unit) * 8);
  height: calc(var(--unit) * 8);
  background-color: red;
}
table {
  position: fixed;
  left: calc(50% - var(--unit) * 4);
  top: var(--unit);
  border-collapse: collapse;
}
td {
  width: var(--unit);
  height: var(--unit);
}
img {
  width: var(--unit);
}

任何帮助将不胜感激！以下是诊断问题可能需要的一些附加信息：

  • 背面的蓝色板是根据 设置大小的图像--unit。
  • 调整屏幕大小时，单位不会更新，它只设置一次。
  • img元素在元素内部，元素td在trthen内部table。
  • 我发现每个额外的宽度td正好是半个像素。

非常感谢您的努力。

4

0 回答 0