css - 将 DOCTYPE 升级为 html5 兼容，但我无法弄清楚三个额外的像素来自哪里

Question

我在我们的应用程序中更新了 DOCTYPE，并且一些小部件中的布局被破坏了。在一个列表中，以前没有滚动条，但现在有滚动条，我不明白为什么(这个特殊问题可以在 Chrome 中重现)。我创建了一个简单的示例来说明问题:

  <div style="overflow-x: hidden; overflow-y: auto; width: 152px; height: 60px;">
     <div >
        <div style="display: inline-block;" style="width: 152px;">
           <div style="width: 152px; height: 20px;overflow: hidden;">Item</div>
           <div style="width: 152px; height: 20px;overflow: hidden;">Item</div>
           <div style="width: 152px; height: 20px;overflow: hidden;">Item</div>
        </div>
     </div>
  </div>  

这是带有过渡文档类型的 jsfiddle，其中列表正常显示:https://jsfiddle.net/vmga/sL04vjwd/

相同的代码，但使用 html5 doctype 时有一个滚动条:https://jsfiddle.net/vmga/aus0tp8p/

Chrome 开发工具显示父容器 (div) 的高度为 64px:

所以我的问题是:

1. 这 4 个额外的像素从何而来？
2. 如何调试此类问题？ Chrome 只显示最终数字，但没有人知道这个数字是如何计算的。应该如何解决这些问题？

Answer 1

display:inline-block 在 HTML5 中创建边距。我已经看到它导致其他神秘权利在其他版本中增加了空间。