表格单元格在Firefox中固定高度和边框问题

Question

我有一个显示一些数据的表格，我需要表格单元格<td>具有固定高度和底部边框。问题是Firefox的单元格高度与Chrome或IE8不同。例如，我有以下css规则：

table {
    width: 100%;
    border-collapse: collapse;
}

table td {
    height: 35px;
    border-bottom: 1px solid #000;
}

Firefox渲染单元格中定义的高度边框，以便显示34px height + 1px border。然而，Chrome和IE会呈现完整的高度，并在其外部/下方显示边框，以便显示35px height + 1px border。

以下是问题http://jsbin.com/oseqiz/9/的预览。 （在Firefox和Chrome / IE中打开它以查看差异）。

这是Firefox中的已知错误，还是其他2个浏览器错误地处理错误。如果是的话，是否有任何修复方法？

我想指出，我不喜欢在<div>中加上<td>，就像我在上面的jsbin示例中为第二个表所做的那样。我这样实现了它，因此可以很容易地看到渲染问题。

Answer 1

好的，请阅读本文

css property box-sizing has no effect on the box model

解决方法可能是设置

td
{
display: inline-block;
}

而不是使用

td
{
box-sizing: content-box;
}

对于跨浏览器的相同高度<td>

Answer 2

此问题似乎已在最新版本的Firefox（此时版本为40）中得到修复，现在所有提到的浏览器中的高度和边框都是一致的。