表格在 Firefox 中看起来很奇怪，但在 Safari/Chrome 上看起来不错答案

【问题标题】：Table looks weird in Firefox, but looks fine on Safari/Chrome表格在 Firefox 中看起来很奇怪，但在 Safari/Chrome 上看起来不错
【发布时间】：2016-06-28 12:47:08
【问题描述】：

我正在尝试创建具有特定布局的表格。所需的输出是这样的（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>

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

【问题讨论】：

标签： css firefox html-table width

【解决方案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;
}

【讨论】：

哦，这对我来说太愚蠢了。我把它用来测试一些东西，却忘了删除它。谢谢！
它发生在所有;)