空表单元格比非空表单元格高答案

【问题标题】：Empty table-cell taller than non-empty空表单元格比非空表单元格高
【发布时间】：2018-12-18 19:00:20
【问题描述】：

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

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

这是代码示例

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/

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

PS。我使用的是 Firefox 62.0b6

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

【问题讨论】：

它与基线对齐有关，但由于它在所有浏览器中都不相同，所以不容易说出原因
如果您不喜欢我的回答，您需要更具体地了解您要查找的内容。解释为什么你想要一个空的 td 元素以及它的用途。
@ChrisHitchcock 有一个空的表格单元格可能有很多原因，但这对问题并不重要。该问题询问为什么空表格单元格创建的基线与带有文本的单元格不同。
仅作记录：我没有对任何人的答案投反对票（而且从来没有，b/c 投反对票很糟糕）。
我认为这是 Firefox 中的一个错误。在我看来，当单元格框不包含行框时，Firefox 将其基线作为填充框的底部，因此单元格中的文本与在该文本上方创建空间的内容垂直对齐。这将有效地与空内联块的基线定义一致。但是空单元格的基线定义是不同的。在那里，基线是内容框的底部，在这种情况下，文本上方不需要额外的空间来强制垂直对齐。

标签： html css firefox html-table

【解决方案1】：

我不知道确切的问题，但你可以依靠伪元素添加一个空元素，它就像添加&nbsp;一样：

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>

【讨论】：

【解决方案2】：

我不是 100% 确定这是问题所在，但根据一些实验，这似乎是一致的。

文本的基线是一个有趣的东西（解释very well in this other StackOverflow question）。本质上，文本元素可以根据使用的字体具有不同的高度。这个高度决定了文本的基线在哪里。

查看 Firefox 字体检查器时，文本元素的默认字体是 Times New Roman（或您的浏览器默认字体），但对于空单元格，没有指定字体。

Firefox“无字体”字体的基线似乎与 Times New Roman 不同。您可以通过创建两个具有相同 senario 的 <span> 标签并查看元素框的基线来验证这一点。

当元素与基线对齐时，空元素具有不同的基线，因此文本被下推以匹配它。

由于这似乎是 Firefox 问题，我不知道您是否可以做很多事情来修复组合，除了不在表中使用 vertical-align: middle 而是使用 top、middle 或bottom.

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

td {
  vertical-align:top;
  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>

如果你无法避免，那么@Temani 的回答似乎是最好的做法。

【讨论】：

是的，它肯定与基线有关，但是当它的行为不同时我们无法提供准确的解释，因此它可能是 firefox，但也可能是所有其他浏览器中的错误

【解决方案3】：

它看起来像一个错误或未定义的行为。您可以通过设置相同的 line-height 使它们相等的高度，例如 line-height: 30px

【讨论】：

这只会通过增加可能不好的第二个表格高度来使问题不可见

【解决方案4】：

如果您要为第一个以下的未来内容进行设置，我会使用 colspan。如果您在第一行之前不需要更多行，只需删除第二个 td

<table border=1>
  <tr>
    <td colspan=2>this table is taller</td>
  </tr>
  <tr>
    <td>more content</td>
    <td>even more content</td>
  </tr>
</table>

<table border=1>
  <tr>
    <td>this table is shorter</td>
    <td>beacuse there's text here</td>
  </tr>
  <tr>
    <td colspan=2>I has content 2 bars of content</td> 
  </tr>
</table>

如果你需要它来跨越两者，那就这样吧。

如果您的表格没有其他内容，请删除第二个 td

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

这是一个小提琴http://jsfiddle.net/snhvc6dx/32/

请记住，如果您的表格没有响应，这不会调整大小，因此随着屏幕变小，您的表格将堆叠在一起，而不是并排放置。

【讨论】：

在假设 OP 否决你之前，你能先解释一下你是如何回答这个问题的吗？我没有看到与该问题相关的任何内容
@TemaniAfif 他的问题与该问题的解决方法有关。摆脱这个问题，以及一个空白的边界空间似乎是解决这个问题的方法。 “和/或知道解决方法？”
那么为什么不简单地删除整个表并使用 div 呢？这也是一个更好的解决方法...

【解决方案5】：

http://jsfiddle.net/snhvc6dx/11/

所以，您告诉浏览器文本应该设置为基线，但您正在从底部基线填充单元格。

只需将垂直对齐设置为中间

vertical-align:middle;

如果文本应位于单元格顶部，则位于顶部...没有填充底部

【讨论】：