Css Google Chrome、float和媒体查询

Css Google Chrome、float和媒体查询,css,google-chrome,css-float,media-queries,Css,Google Chrome,Css Float,Media Queries,我遇到了一个问题,Google Chrome有时会错误地呈现浮动元素。更具体地说,标记如下所示: <h1> Headline <small>Sub-heading</small> </h1> 下面是一个指向jsfiddle.com的链接,该链接演示了实际问题: 如您所见,元素在媒体查询中浮动。加载页面时,如果浏览器窗口宽度超过媒体查询中指定的宽度,则一切正常。但是,如果在此点下方调整浏览器的大小,然后再次备份,则该元素将错误地显示

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

<h1>
    Headline
    <small>Sub-heading</small>
</h1>
下面是一个指向jsfiddle.com的链接,该链接演示了实际问题:

如您所见,元素在媒体查询中浮动。加载页面时,如果浏览器窗口宽度超过媒体查询中指定的宽度,则一切正常。但是,如果在此点下方调整浏览器的大小,然后再次备份,则该元素将错误地显示在h1下方


这是谷歌浏览器的bug吗?我已经验证了它在Firefox和Safari 8中正常工作。我正在使用Google Chrome 40.0.2214.91 64位操作系统X。

此行为是Google Chrome中的一个已验证错误:

无法在W7上的Chrome 41.0.2272.17 beta-m 64位中复制您试图在下面说的,但在右边?我的意思是调整浏览器窗口的大小,使其小于媒体查询中指定的宽度。如果随后再次使窗口变大,使其超过媒体查询断点,则浮动元素将错误地定位在h1下方。它会向右浮动,是的,但是它在页面的下方太远了。将此位置与您在比媒体查询断点更宽的浏览器窗口中重新加载页面时得到的位置进行比较。mhmmm我确认Chrome 40中的奇怪行为……我使用的是vsn 38-windows上没有问题
h1 small {
    display: block;
}

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