表格行 <tr> 上的精确高度答案

【问题标题】：Exact height on table row <tr>表格行 <tr> 上的精确高度
【发布时间】：2018-02-21 06:39:14
【问题描述】：

我正在努力在 html 表格行上设置 EXACT 高度。

左列是两个高度为 44px 的 div，右列是表格。每行的高度设置为 44px，但在 Google Chrome 网络检查工具上，行的高度显示为 44.44px。

SASS：

table {
  width: 100%;
  border: none;
  tr {
    height: 44px;
    cursor: pointer;
    td {
      padding: 0 16px;
      border-bottom: 1px solid $bg-light;
      vertical-align: middle;
    }
  }
}

我也在使用Eric Meyers css-reset，尽管不管有没有它，问题仍然存在。

关于额外的 .44px 来自哪里的任何线索？

编辑

问题似乎是特定于 Google Chrome。 Safari 呈现正确的高度。

【问题讨论】：

你正在嵌套你的 CSS。应该是table{...}tr{...}td{...}
抱歉，不清楚我使用的是 SASS
能否添加 HTML 和处理后的 CSS，以便我们看到问题中的问题？（创建一个minimal reproducible example）。这样，我们就更容易复制并找到问题的解决方案。
如何显示 HTML 以便我们重现您的图像状态？

标签： html css sass

【解决方案1】：

Eliminate gap between tbody tags 可能重复

但是，这是您的 div 旁边的表格的边框折叠、边框间距问题。默认情况下，表在那里有烦人的额外空间。如果你想在中心对齐项目，还要确保你的 td 和 div 显示 inline-block/block 或 flex。

这里有一些代码和如何解决它的链接。

table {
   border-spacing: 0;
   border-collapse: collapse;
}

https://codepen.io/calebswank11/pen/rJvBWK

【讨论】：