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

Question

我该怎样同步两个表格的行高，使它们看起来像一个表格？这里是一个 JSFiddle: http://jsfiddle.net/2B8sy/。在 Firefox 中运行正常，但在 Chrome 和 IE 中不起作用。

问题在于，在 Chrome 和 IE 中，将一个单元格的 jQuery 的 .height() 传递给另一个单元格的 .height() 会导致它们的高度不相等。但在 Firefox 中可以正常工作。

如 Fiddle 中所示，每行的第一行始终比预期短2个像素。这对所有行都是如此。这是在 Chrome 和 IE10 中出现的问题，而在 Firefox 中一切正常。

为什么 element.height(otherElement.height()); 不会使它们的高度相等呢？例如： http://jsfiddle.net/2B8sy/ 我也尝试了 window.getComputedStyle，但结果与使用 jQuery 相同。

- ProblemsOfSumit

---

我们能看到CSS吗？ - JonRed

我更新了帖子。这些是基本的CSS定义。 - ProblemsOfSumit

这里有一个干净的JS Fiddle，包含问题 http://jsfiddle.net/2B8sy/我删除了我的示例用例，转而使用JSFiddle，因为它更加清晰和易于使用。 - ProblemsOfSumit

谢谢你提供的 JSFiddle，非常完美。 - JonRed

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

- JonRed

---

你也可以通过使用 tr 的高度而不是 td 来解决这个问题 - 这就是在看到你的答案之前我所做的。很好。 - ProblemsOfSumit

@Sumit - 是的，我想那应该可以，因为 tr 的高度已经包含了 (td 的高度) + (td 的边框)。 - JonRed