修复了 Firefox 中表格单元格的高度和边框问题

我有一个显示一些数据的表格，我需要表格单元格<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/ http://jsbin.com/oseqiz/9/。 （在 Firefox 和 Chrome/IE 中打开它以查看差异）。

这是 Firefox 中的已知错误还是其他 2 个浏览器的操作不正确。如果是这样，有什么解决办法吗？

我想指出的是我不喜欢有额外的<div>在 - 的里面<td>就像我对上面 jsbin 示例中的第二个表所做的那样。我是这样实现的，这样渲染问题就很容易看出。

好的，请阅读本文

css 属性 box-sizing 对盒子模型没有影响 https://stackoverflow.com/questions/7554731/css-property-box-sizing-has-no-effect-on-the-box-model

解决方法可能是设置

td
{
display: inline-block;
}

并且比使用

td
{
box-sizing: content-box;
}

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