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

Posted 2023-03-06

【中文标题】使用媒体查询时在 Chrome 中出现奇怪的浮动渲染

【英文标题】：Weird float rendering in Chrome when using media queries

【发布时间】：2013-04-08 03:17:57

【问题描述】：

我已经构建了一个简单的响应式菜单，默认情况下垂直布局，但如果分辨率大于 400 像素，我将其水平布局。

垂直版我只使用display: block，水平版我在:first-child 上使用float: left，在:last-child 上使用float: right（因为我希望它们到达包装器的边缘）。

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

http://jsfiddle.net/G2h9U/

这对我来说似乎是一个 Chrome 错误，但有没有人遇到过同样的情况？有解决办法吗？

【问题讨论】：

是的，这是一个错误。但实际上，谁在现实生活中调整浏览器窗口的大小？排除我们，极客:)

没错，但在移动设备上改变方向是很常见的。不确定这是否发生在移动 chrome 中。

在移动版 Chrome 上也会发生，但仍未修复。

【参考方案1】：

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

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

另一个有同样问题的堆垛机。

Webkit float and display

【讨论】：

我想我们只需要等待修复。谢谢