使用空格渲染差异：预先包裹

Question

我在我正在处理的Web应用程序中发现了一些意外的渲染。它可以在Chrome和Opera中重现，但不能在Firefox，Edge或Internet Explorer中重现。这表明Webkit链接。

无论如何，这是我能找到的最小的复制品。

div { white-space:pre-wrap; }

<div style="width:10px; background:blue; ">                      </div>
<div style="width:2px;  background:green;">                      </div>

出乎意料的是，在Chrome和Opera（在我的机器上），绿色框比蓝色框高得多。

在这种情况下，什么是正确的行为？我应该为webkit提交错误吗？

对于那些无法重现的人（如macOS），这里是截图。