html - box-sizing:border-box 导致 td 内有填充的 div 有边距，为什么？

Question

我想制作一个内容垂直居中的框，但如果内容溢出，也会滚动。我可以使用一个带有vertical-align:middle的表格来实现垂直居中，但是td的滚动不能溢出，所以我在td里面放了一个滚动的div，让它的高度为：100%。这很好，直到我尝试给滚动 div 一些填充，这使得它对于 td 来说太宽了，所以我给它 box-sizing:border-box. 然后突然在 div 上有一个顶部和底部边距！

哇！？

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

绿线和红线之间不应该有任何空间，但它确实存在！如果您更改绿色 div 上的填充，神秘的边距会发生变化。就好像 height: 100% 实际上是 100% - 填充或其他东西。如果您删除填充或 box-sizing:border-box 它就会消失。

奖励积分：为什么 FF 不尊重桌子的高度：Chrome/Saf 遵循 50% 规则？

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

Answer 1

您的浏览器正在桌子周围添加空间。在 Chrome 中添加：

table {
  border-spacing: 0px;
}