容器内的内联 DIV 总是将最后一个推入 WebKit 中的第二行

Question

尝试手工制作滑块时，我注意到，在 Webkit/Blink（Chrome 桌面和 Android 股票浏览器）中，我的 [=55= 下面的最后一张幻灯片] 将始终被推入下一行，无论容器中有多少张幻灯片：

// dynamatically insert the "scene"s
// so no white space and/or line breaks occurs
[].forEach.call(document.querySelectorAll("div.container"),function(container){
    var scene;
    // number of children doesn't matter
    var all=Math.floor(Math.random()*15)+1;
    for(var i=0;i<all;i++){
        scene=document.createElement("div");
        scene.className="scene";
        scene.appendChild(document.createTextNode(i));
        container.appendChild(scene);
    }
});

div.container
{
    width:50px;
    overflow:visible;
    white-space:pre;
    outline:1px solid red;
}
div.container > div.scene
{
    width:100%;
    height:50px;
    background-image:linear-gradient(to bottom right, #FFF, #000);
    display:inline-block;
    vertical-align:top;
    font-size:20px;
    color:blue;
}

<!-- prepare the container -->
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>

我也做了一个jsfiddle

这是它在三个主要浏览器中的样子：

为什么 WebKit/Blink 在这种情况下如此特别，我怎样才能让它们表现得像 Gecko/Trident？

编辑：

.container中的width:50px只是为了方便演示问题；在实际产品中，它是 100% 视口宽度，而 .scene 中的 width:100% 实际上是有意的，而不是硬编码的 50px;
实际产品中的.scene通常是图像，我可能事先不知道它们的尺寸，所以这里的height:50px只是为了让输出看起来更"clean"， .container 中的 height:auto 是有意的。

Answer 1

更新

也许可以在 .container 中尝试 white-space: nowrap; 来抑制文本换行和换行，而不是 white-space: pre;（pre 保留新行）。在此处阅读有关 white-space 属性的更多信息：http://developer.mozilla.org/en-US/docs/Web/CSS/white-space

注意：没有明确解释为什么会这样。只是 Chrome 似乎出于某种原因将 div 包裹起来。可能是 chrome/webkit.

中的错误

容器内的内联 DIV 总是将最后一个推入 WebKit 中的第二行

inline DIVs inside a container always pushing the last one into second line in WebKit

html

css

webkit

blink

编辑：