jQuery：如何同步表格单元格/行高度

Question

如何同步两个表的行高（如果将它们放在一起，它们看起来像一个表）？ 这是一个JSFiddle http://jsfiddle.net/2B8sy/在Firefox中正常工作 - 在Chrome或IE中不起作用。

问题是，将一个单元格的jQuerys .height()传递给另一个单元格.height()使得单元格在Chrome和IE中的高度不相同 - 尽管在Firefox中工作正常。

正如你在小提琴中看到的那样，第一行总是2像素太短。 发生在所有行上。 这适用于Chrome和IE10。 Firefox中的一切都很好。

为什么要element.height(otherElement.height()); 不要让他们身高相等？ 示例： http ： //jsfiddle.net/2B8sy/

我也尝试过window.getComputedStyle，但是我得到了相同的结果。

Answer 1

我在Chrome中破解了这一点。 http://jsfiddle.net/2B8sy/5/

问题在于测量td高度。 我已经更新了td的CSS，如下所示：

table td {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

这个额外的代码告诉浏览器在高度和宽度测量中包含填充和边距，因此在使用这些元素时不会出现差异。

我怀疑Chrome和其他失败的浏览器在读取和设置此属性时不一致。