box-sizing：border-box导致div内部填充td有边距，为什么？

Question

我想创建一个包含垂直居中内容的框，但如果内容溢出则会滚动。我可以使用一个垂直对齐的桌子：中间来实现垂直居中，但是td不能溢出滚动，所以我在td中放置一个滚动div并使其高度：100％。这很好，直到我尝试给滚动div一些填充，这使得它对于td太宽，所以我给它框大小：边框。然后突然间div上有一个顶部和底部边缘！

WAT！吗

http://codepen.io/jessehattabaugh/pen/GIjiL

绿线和红线之间不应有任何空间，但它确实存在！如果更改绿色div上的填充，则神秘边缘会发生变化。好像高度：100％实际上是100％ - 填充或其他东西。如果你删除填充或框大小：border-box它会消失。

奖励积分：为什么FF不尊重桌子的高度：Chrome / Saf做的时候有50％的规则？

更新：有人建议修复边框折叠或边框间距，但这是我将这些规则应用到表格后的样子; 表格单元格的红色边框与蓝色表格边框折叠，但绿色div的边框仍然在其上方和下方留出空间。也许尝试调整浏览器的高度，看看会发生什么。

Answer 1

您的浏览器正在为表格添加空间。在Chrome中添加：

table {
  border-spacing: 0px;
}