Question

我正在尝试创建一个具有特定布局的表格。所需的输出是这个（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中的tr width为326px，而在其他浏览器中为310px。我尝试明确将width设置为310px，但这并没有解决问题。

Answer 1

从display: inline-block移除td并将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;
}

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

1 个答案: