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

Question

当尝试手工制作一个 slider 时，我注意到，在 Webkit/Blink(Chrome 桌面和 Android 浏览器)中，我的 CSS 下的最后一张幻灯片总是被推到下一行，不管有多少张幻灯片容器:

// 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% 视口(viewport)宽度，而 .scene 中的 width:100% 实际上是有意的，而不是硬编码的 50px;
• 实际产品中的.scene通常是图片，我可能事先不知道它们的尺寸，所以这里的height:50px只是为了让输出看起来更“干净”，并且 .container 中的 height:auto 是有意的。

Answer 1

更新

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

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