个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 10:39:04 26 4
gpt4 key购买 nike

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

good result

但是 Firefox 给了我这个:

bad result

示例代码如下:

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 但这并没有解决问题。

最佳答案

从 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;
}

关于css - 表格在 Firefox 中看起来很奇怪，但在 Safari/Chrome 中看起来不错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35971298/

26 4 0
文章推荐： java - 如何在测试过程中使用Mapstruct创建的映射器作为@Mock
文章推荐： python - 忽略/跳过 numpy 数组中的值？
文章推荐： java - AsyncTask 执行串行而不是并行(HTTPost TimeOutException)
文章推荐： linux - 猫 :/proc/1/comm: File not found
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com