使用媒体查询时Chrome中的奇怪浮动渲染

时间:2013-04-15 21:16:59

标签: css google-chrome css-float media-queries

我已经构建了一个简单的响应式菜单,默认情况下是垂直排列的,但如果分辨率大于400px,我会将其水平放置。

垂直方向我只使用display: block而对于横向版本,我在float: left:first-childfloat: right:last-child(因为我希望它们到达包装的边缘。)

如果您以足够宽的分辨率检查小提琴,您应该看到三个水平布置的红色框。调整iframe的大小,它们应该更改为垂直布局。现在,这是我的问题,当您将iframe重新调整为水平布局时,{J}版本12.0下的Chrome版本26.0.1410.63中无法正确呈现:last-child菜单项(我还没有尝试其他版本的Chrome),它尽管如此,它仍然适用于Firefox。

http://jsfiddle.net/G2h9U/

这对我来说似乎是一个Chrome错误,但是有没有人经历过同样的错误并且有解决方法?

1 个答案:

答案 0 :(得分:2)

看起来Chrome问题已经存在了一段时间。

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

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

Webkit float and display