html - 空表格单元格比非空表格单元格高

Question

我正在努力解决渲染问题(这可能是 Firefox 中的错误，因为 Chrome 和 Edge 看起来不错)

一个空的 <td> (表格单元格)如果有 padding 则使整行更高和 vertical-align应用于此单元格(或包含的行)。如果表格单元格非空 - 高度问题就消失了。添加一个愚蠢的 解决这个问题。

这是代码示例

table {float:left;margin-right:10px} /* so tables are side-by-side just to demonstrate the bug */

td {
  vertical-align:baseline;
  padding-bottom:20px;
}

<table border=1>
  <tr>
    <td>this table is taller</td>
    <td></td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
</table>

jsfiddle:http://jsfiddle.net/snhvc6dx/10/

有人遇到过类似的事情和/或知道解决方法吗？

附言。我在 Firefox 62.0b6

更新:vertical-align:baseline非常(!)经常被许多前端框架的“CSS-reset”样板添加，所以这不是我的选择。至于“为什么有人需要一个空的 td ？”好吧，这个表是在运行时呈现的，只是数据库中没有该单元格的数据。

Answer 1

我不完全知道这个问题，但你可以依靠伪元素来添加一个空元素，它与添加   一样:

table {float:left;margin-right:10px} /* so tables are side-by-side */

td {
  vertical-align:baseline;
  padding-bottom:20px;
}
td:after {
 content:"";
}

<table border=1>
  <tr>
    <td>this table is taller</td>
    <td></td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
</table>