媒体查询后，Chrome不会重新应用浮点数

Question

我正在尝试为我的网站创建一个3盒的列布局。一旦浏览器窗口宽度小于700px，我也希望这3个框崩溃。我最终使用了div和一些花车的组合，并且能够在除Chrome之外的所有浏览器中使用它。

当您首次在Chrome中加载它时，它似乎有效 - 在正确的位置有三个浮动框。但是，一旦你调整了浏览器的大小，它就会与最右边的两个盒子混在一起。这不会发生在IE或Firefox中。

全屏，正确的框布局：

＆lt; 700px正确布局：

重新调整大小后：

在我看来，在浏览器调整回大于＆gt; 700px后，Chrome不会重新应用其中一个浮点数（或其他属性）。这有什么理由，还是个bug？

代码：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

DEMO：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;
    }
}