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和其他失败的浏览器在读取和设置此属性时不一致。