jquery - 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.getComputedStyle，但我在那里得到了相同的结果。

Answer 1

I've cracked this in Chrome. http://jsfiddle.net/2B8sy/5/

The issue was with the measuring of the td height. I've updated the CSS for the td as below:

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

This extra code tells the browser to include padding and margins inside the height and width measurements, so you don't get discrepancies when working with these elements.

I suspect Chrome and the other failing browsers were not consistent in their read and set of this property.