Google Chrome、浮动和媒体查询

Question

我遇到了 Google Chrome 有时会错误地呈现浮动元素的问题。更具体地说，标记如下所示：

<h1>
    Headline
    <small>Sub-heading</small>
</h1>

这是使用这个简单的样式 CSS:

h1 small {
    display: block;
}

@media (min-width: 750px) {
    h1 small {
        float: right;
    }
}

（这里是 link 到 jsfiddle.com，它演示了实际问题：http://jsfiddle.net/ys6L88r8/1/）

如您所见，该元素在媒体查询中是浮动的。加载页面时，如果浏览器 window 宽度超过媒体查询中指定的宽度，一切看起来都很好。但是，如果您将浏览器的大小调整到该点以下，然后再次备份，该元素将错误地显示在 h1 下方。

这是 Google Chrome 错误吗？我已经验证它在 Firefox 和 Safari 8 中可以正常工作。我正在为 OS X 使用 Google Chrome 40.0.2214.91（64 位）。

Answer 1

Google Chrome, float, and media queries