html - 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>