CSS表格，在Firefox中table-cell高度问题

Question

首先，我有一些示例和代码在这里（我用来玩的网站）。这是实际链接，以防万一：http://www.williamrosmus.com/examples/calendar1_wf.html 这是我在Firefox（我正在使用v3.6）中遇到的问题，我想知道发生了什么。Requonc显示合理，IE8完美。

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

对于如何修复此问题或Firefox发生了什么的任何建议或评论？

问候，

BillR

此外，根据Robin的建议，我在mozilla.org上记录了这个错误。有人在那里确认了它。如果有人感兴趣：

https://bugzilla.mozilla.org/show_bug.cgi?id=634489

- Bill Rosmus

---

非常感谢您制作漂亮的演示页面，展示了问题和期望的结果。对此给您加一分。 - thirtydot

Answer 1

只需在空单元格中插入 即可解决此问题，我刚测试过，在Firefox中可以解决。

---

我找到了一个网页，讨论了一下你正在遇到的问题。

它提供了一个CSS替代方案：table { empty-cells: show }，请参见：

https://developer.mozilla.org/en/CSS/empty-cells

然而，在Firefox中使用display: table-cell标签的<div>似乎并没有帮助。

- thirtydot

---

@BillR：有趣，感谢提供链接。我按照链接中的建议测试了vertical-align: top，在Firefox中确实可以使用您的测试用例。因此（因为它是CSS），它似乎比 更干净的解决方法，只要在其他常见浏览器中按预期工作即可。 - thirtydot

将“vertical-align: top;”添加到表格单元格中，可以帮助我消除顶部的不必要空白。谢谢！ - Igor

垂直对齐似乎并不总是有效。在使用带有内容的after元素，如content: "\00a0"，对我来说似乎是另一种不错的解决方法。 - Jacob van Lingen

Answer 2

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

- David Baron

Answer 3

我认为这是Gecko中的一个错误。我在Bugzilla（https://bugzilla.mozilla.org/）中搜索了一遍，但没有找到其他人报告此问题。最好提交一个带有缩小的测试用例的错误报告（或者只链接到您当前的错误报告），以查看那里的开发人员对此的看法。

关于特定的解决方法，thirtydot建议使用 可能是您最好的选择。

- Robin Whittleton

---

好的建议。我会记录下来的。是的，thirtydot 是个牛人...或者女人...该死的模棱两可的名字！ :) - Bill Rosmus

好东西。使用良好的测试用例提交错误报告确实可以提高浏览器的质量 :) - Robin Whittleton

Answer 4

当我将div.calendar_day的显示方式从"table-cell"更改为"inline-block"或"block"，并添加了float:left时，高度被正确渲染。

- Jaime Garcia