html - Chrome 不会在媒体查询后重新应用 float

Question

我正在尝试为我的网站创建一个 3 框栏布局。我还希望这 3 个框在浏览器窗口宽度小于 700 像素时折叠。我最终使用了 div 和一些 float 的组合，并且能够让它在除 Chrome 之外的所有浏览器中工作。

当您第一次在 Chrome 中加载它时，它似乎可以正常工作 - 在正确的位置有三个 float 框。但是，一旦您调整了浏览器的大小，它就会弄乱最右边的两个框。这不会发生在 IE 或 Firefox 中。

全屏，正确的框布局:

<700px 正确布局:

调整回全屏后:

在我看来，在浏览器调整回 >700px 后，Chrome 并没有重新应用其中一个 float (或另一个属性)。这有什么原因吗，还是一个错误？

代码:http://codepen.io/anon/pen/omfAj

HTML:

<div class="bubbles">
    <div class="bubble">
    </div>

    <div class="bubble">
    </div>

    <div class="bubble">
    </div>
</div>

CSS:

.bubbles {
    text-align: center; /* centers the middle bubble */
}
    .bubbles .bubble {
        width: 25%;
        height: 300px;

        border: 1px solid black;
    }
        .bubbles .bubble:nth-child(1) {
            float: left;
        }
        .bubbles .bubble:nth-child(2) {
            display: inline-block; /* this is basically a replacement for float:center, it'll cause it to position based on the text-align:center in .bubbles */
        }
        .bubbles .bubble:nth-child(3) {
            float: right;
        }


@media all and (max-width:700px) {
    .bubbles .bubble:nth-child(1),
    .bubbles .bubble:nth-child(2),
    .bubbles .bubble:nth-child(3) {
        float: none;
        display: block;
        width: 70%;
        margin: 0 auto;
        margin-top: 50px;
    }
}

Answer 1

演示:http://codepen.io/anon/pen/oJnhc

这是这里的错误(很可能是第一个): https://bugs.webkit.org/show_bug.cgi?id=53166 https://code.google.com/p/chromium/issues/detail?id=329611

.bubbles {
    text-align: center; /* centers the middle bubble */
    display: table;
    width: 100%;
}
.bubbles .bubble {
    width: 25%;
    height: 300px;
    border: 1px solid black;
}
.bubbles .bubble:nth-child(1) {
    float: left
}
.bubbles .bubble:nth-child(2) {
    display: inline-block;
    float: none;
}
.bubbles .bubble:nth-child(3) {
    float: right
}
@media all and (max-width:700px) { 
    .bubbles {
        display: block;
        width: 100%;
    }
    .bubbles .bubble,
    .bubbles .bubble:nth-child(1),
    .bubbles .bubble:nth-child(2),
    .bubbles .bubble:nth-child(3) {
        float: none;
        display: block;
        width: 70%;
        margin: 50px auto 0;
        left: 0;
    }
}