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

Question

如何同步两个表的行高(如果彼此相邻放置，这会使它们看起来像一个表)？ 这是一个 JSFiddle http://jsfiddle.net/2B8sy/ 在 Firefox 中工作正常 - 在 Chrome 或 IE 中不起作用。

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

正如您在 Fiddle 中看到的，第一行总是短 2 个像素。所有行都会发生这种情况。这适用于 Chrome 和 IE10。 Firefox 中一切正常。

为什么 element.height(otherElement.height()); 不使它们的高度相等？ 示例:http://jsfiddle.net/2B8sy/

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

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