使用媒体查询时，Chrome中的奇怪的浮动显示 [英] Weird float rendering in Chrome when using media queries

问题描述

我已经建立了一个简单的响应菜单，默认情况下垂直放置，但如果分辨率大于400px，我会水平放置。

I've built a simple responsive menu that's by default laid out vertically, but if the resolution is wider than 400px i lay it out horizontally.

使用 display：block ，对于水平版本，我在上执行 float：left ：last-child 上的子和 float：right

Vertically I simply use display: block and for the horizontal version I do float: left on :first-child and float: right on :last-child (because I want them to reach the edges of the wrapper).

如果你在一个足够宽的分辨率下检查小提琴，你会看到三个水平放置的红色框。调整iframe的大小，他们应该更改为垂直布局。现在，这是我的问题，当你调整大小iframe回到水平布局：last-child 菜单项将无法正确显示在Chrome版本26.0.1410.63在Ubuntu 12.10我没有尝试其他版本的Chrome），它的工作原理应该在Firefox虽然。

If you check the fiddle in a wide enough resolution you should see three red boxes laid out horizontally. Resize the iframe and they should change to a vertical layout. Now, here's my problem, when you resize the iframe back to the horizontal layout the :last-child menu item will not render correctly in Chrome Version 26.0.1410.63 under Ubuntu 12.10 (I haven't tried other versions of Chrome), it works as it should in Firefox though.

http://jsfiddle.net/G2h9U/

这对我来说似乎是一个Chrome错误，但是有任何人遇到过

This seems like a Chrome bug to me, but has anyone experienced the same and is there a fix?

推荐答案

看起来像Chrome问题已经出现了一段时间。

Looks like a Chrome issue that's been out there for a while.

https://bugs.webkit.org/show_bug .cgi？id = 53166

另一个堆叠器有相同的问题。

Another Stacker with the same issue.

Webkit浮动和显示

这篇关于使用媒体查询时，Chrome中的奇怪的浮动显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！