Google Chrome浏览器，浮动广告和媒体查询 [英] Google Chrome, float, and media queries

问题描述

我遇到Google Chrome有时不正确呈现浮动元素的问题。更具体地，标记看起来像这样：

I'm having a problem where Google Chrome sometimes incorrectly renders a floated element. More specifically, the markup looks like this:

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

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

This is styled using this simple CSS:

h1 small {
    display: block;
}

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

（这里是指向jsfiddle.com的链接演示了操作中的问题： http://jsfiddle.net/ys6L88r8/1/ ）

(here is a link to a jsfiddle.com which demonstrates the problem in action: http://jsfiddle.net/ys6L88r8/1/)

如您所见，元素在媒体查询中是浮动的。当加载页面时，如果浏览器窗口宽度超过媒体查询中指定的宽度，一切看起来很好。但是，如果您在此点之下调整浏览器的大小，然后再次进行备份，则该元素将不正确地显示在h1下面。

As you can see, the element is floated within a media query. When loading the page, if the browser window width exceeds the width specified in the media query, everything looks fine. However, if you resize the browser below this point and then back up again, the element incorrectly appears below the h1.

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

Is this a Google Chrome bug? I have verified that it works correctly in Firefox and Safari 8. I'm using Google Chrome 40.0.2214.91 (64-bit) for OS X.

推荐答案

此行为是Google Chrome中经过验证的错误： https ：//code.google.com/p/chromium/issues/detail？id = 411256

This behavior is a verified bug in Google Chrome: https://code.google.com/p/chromium/issues/detail?id=411256

这篇关于Google Chrome浏览器，浮动广告和媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！