Table 在 Firefox 中看起来很奇怪，但在 Safari/Chrome 中看起来不错

Question

我正在尝试创建具有特定布局的 table。所需的输出是这样的 (Chrome/Safari):

但是 Firefox 给了我这个：

示例代码如下：

table {
  border-collapse: collapse;
  margin: 0 auto;
}
div {
  display: inline-block;
  width: 70px;
  height: 70px;
  vertical-align: middle;
  background-color: white;
}
td {
  background-color: white;
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 36px;
  text-align: center;
}
body {
  background-color: black;
}

<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <th colspan="5">
        <div></div>
      </th>
    </tr>
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
    <tr>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
      <td>A</td>
    </tr>
  </table>
</body>

</html>

我唯一注意到的是 tr width 在 Firefox 中是 326px 而在其他浏览器中是 310px。我尝试将 width 显式设置为 310px 但这并没有解决它。

Answer 1

从 td 中删除 display: inline-block，并将 margin-bottom: -1px 添加到 div。 SEE THE DEMO ON FIREFOX.

CSS

table {
  border-collapse: collapse;
  margin: 0 auto;
}
div {
  display: inline-block;
  width: 70px;
  height: 70px;
  vertical-align: middle;
  background-color: white;
  margin-bottom: -1px;
}
td {
  background-color: white;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 36px;
  text-align: center;
}
body {
  background-color: black;
}

Table 在 Firefox 中看起来很奇怪，但在 Safari/Chrome 中看起来不错

Table looks weird in Firefox, but looks fine on Safari/Chrome

css

firefox

html-table

width