html - Chrome 中 tr 中的 td 在宽度上偏移了 4 个像素

Question

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

Demo here.

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 像素。

Fiddle

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

table {border-collapse: collapse;}

现在 Firefox 和 Chrome 都对 tr.width() 提供相同的响应。