Chrome 中 tr 中的 td 宽度关闭了 4 个像素

Question

如果在 Chrome 中使用此代码，则会得到一个带有数字 4 的 td，表示 td 的宽度比 tr 小 4 个像素。如果您在 Firefox 中执行此操作，您会得到 0。如果您将“display:block”添加到两个 css 定义中，它会更改为 0。我的问题是，Chrome 究竟是从哪里获得 4 个额外像素的？

演示在这里。

HTML：

<table>
  <tbody>
    <tr>
        <td>Hey</td>
    </tr>
  </tbody>
</table>

JS（使用 jQuery）：

jQuery(document).ready(
function () {
    var td = $("td");
    var tr = $("tr");
    td.text(tr.width() - td.width());
});

CSS：

tr{
  background-color:red;
}
td {
  padding:0px;
}

Answer 1

使用 Chrome 的检查器，您会发现应用了这种样式：

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
}

边框间距 2（乘以 2 边）= 神秘的 4 像素。

小提琴

因此，要克服这个问题，请将其添加到您的样式表中：

table {border-collapse: collapse;}

现在 Firefox 和 Chrome 都对tr.width().