Firefox 中的 CSS 表格、表格单元格高度问题答案

【问题标题】：CSS table, table-cell height issue in FirefoxFirefox 中的 CSS 表格、表格单元格高度问题
【发布时间】：2011-06-27 15:46:47
【问题描述】：

首先，我有示例和代码here（我一直在玩的网站）。这是实际链接以防万一：http://www.williamrosmus.com/examples/calendar1_wf.html

这是我在使用 Firefox（我使用的是 v3.6）时遇到的一个问题，我想知道发生了什么。 Requonc显示合理，IE8完美。

作为学习练习，我使用 CSS 表格而不是传统的 html 标签在 xhtml 中手动创建了一个日历。我将单元格的高度和宽度设置为 100 像素 x 100 像素。然而，顶行和底行，其中一些单元格是空的，在 Firefox 中显示得太高了。

关于如何解决此问题以正确显示或 Firefox 发生了什么的任何建议或 cmet？

问候，

比尔R

除此之外，根据 Robin 的建议，我将其记录为 mozilla.org 上的错误。有人刚刚在那里证实了这一点。如果有人感兴趣：

【问题讨论】：

【解决方案1】：

有关详细信息，请参阅 https://bugzilla.mozilla.org/show_bug.cgi?id=634489 和 https://bugzilla.mozilla.org/show_bug.cgi?id=569645 中的讨论。（不过，在所有表格单元格上使用 'vertical-align:top' 或 'vertical-align: bottom' 应该是一个合理的解决方法。）

【讨论】：

【解决方案2】：

我相信这是 Gecko 中的一个错误。我浏览了 Bugzilla (https://bugzilla.mozilla.org/)，但找不到任何其他人报告此事。可能值得提交一个减少测试用例的错误（或者只是在你当前的测试用例中链接），看看那里的开发人员是怎么做的。

关于具体的解决方法，三十点建议的&nbsp; 可能是您最好的选择。

【讨论】：

【解决方案3】：

当我将 div.calendar_day 的显示更改为“inline-block”或“block”而不是 table-cell 并添加 float:left 时，高度已正确呈现。

【讨论】：

【解决方案4】：

只需将&nbsp; 粘贴在空单元格内即可？

我刚刚测试过，这在 Firefox 中修复了它。

I found a page 详细介绍了您遇到的问题。

它建议使用 CSS 替代方案； table { empty-cells: show }，见：

但是，这似乎对 Firefox 中的 <div> 标记和 display: table-cell 没有帮助。

【讨论】：

@BillR：很有趣，谢谢你的链接。我按照链接中的建议测试了vertical-align: top，它确实适用于您在 Firefox 中的测试用例。因此，（因为它是 CSS）它似乎是比 &nbsp; 更简洁的解决方法，前提是它在其他常见浏览器中按预期工作。
添加“垂直对齐：顶部；”到我有空白空间的表格单元格帮助我删除了单元格顶部的这个不需要的空间。谢谢！
垂直对齐似乎并不总是有效。使用带有 content: "\00a0" 的 after 元素对我来说似乎是另一个很好的解决方法。