Chrome 中 tr 内的 td 在宽度上偏离 4 个像素答案

【问题标题】：td within a tr in Chrome is off by 4 pixels in widthChrome 中 tr 内的 td 在宽度上偏离 4 个像素
【发布时间】：2014-07-09 01:25:16
【问题描述】：

如果您在 Chrome 中使用此代码，您会得到一个 td，其中包含数字 4，表示 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;
}

【问题讨论】：

您是否使用 Chromes 检查器查看是否可以确定 Chrome 可能应用的任何 CSS 规则？
Chrome 在 31px 处显示 tr，而 Firefox 在 27px 处显示...

标签： html css google-chrome html-table

【解决方案1】：

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

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

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

Fiddle

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

table {border-collapse: collapse;}

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

【讨论】：

谢谢！现在，如果边框间距是它关闭 4 的原因，我为什么要更改边框折叠而不是边框间距本身？与border-spacing:0px 相比，border-collapse:collapse 有什么好处吗？
border-collapse 是根本原因。更改它会消除border-spacing。更改 border-spacing 只会更改间距，但会将 border-collapse 保留为之前的值。最好注意问题的根源以保持一致性。

【解决方案2】：

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

table{
    border-collapse:collapse;
}

这里border-collapse CSS 规则是 CSS 重置的一部分。

Fiddle Demo

为什么？？

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

【讨论】：

【解决方案3】：

在 chrome 中，表格的默认边框间距为 2 个像素。如果您在表格选择器上将边框间距设置为 0，您将得到 0 打印输出。
您的 CSS 将如下所示：

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

【讨论】：

我不明白你的意思......它确实像这样工作：Fiddle
定义的边框间距是 2px，而不是 4px。您的回答中该陈述不正确。
哦，对了，我想我是这么说的，因为它两边都有间距，总共是4个