Chrome中tr中的td宽度为4像素

Question

如果您在Chrome中使用此代码，则会得到一个数字为4的td，表示td的宽度比tr小4个像素。如果你在Firefox中做到这一点，你得到0.如果你在两个css定义中添加“display：block”，它就会变为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()提供相同的响应。

Answer 2

将此CSS规则添加到CSS中，您将始终将其发送到0

table{
    border-collapse:collapse;
}

此处border-collapse CSS规则是CSS重置的一部分。

Fiddle Demo

为什么？

某些-webkit浏览器具有默认的用户代理属性，因为表格具有border-collapse:separate规则，因此在开始设计任何网站之前始终尝试使用Css Reset，这是一种很好的做法。< / p>

Answer 3

在chrome中，表格的默认边框间距为2像素。如果在表格选择器上将border-spacing设置为0，则会打印出0 你的CSS看起来像这样：

table{
     border-spacing: 0;
}
tr{
     background-color: red;
}
td{
     padding: 0;
}