css - 响应式设计 - 调整浏览器大小时 DIV 的问题

Question

我正在将当前固定宽度的网站转变为响应式网站，可在以下位置查看:http://www.byfrequency.co.uk/demo

我已经创建了 CSS 框架并应用了相关的媒体查询(在 Gridpak 的帮助下)，所以没有问题。我遇到的问题是，当我调整浏览器大小时，我的 div 会改变位置并最终产生闪烁效果。这似乎只发生在我设置的宽度 768px 和 1080px 之间。

我不知道为什么会这样，也不知道如何解决这个问题，所以无法复制和粘贴相关的代码位。非常感谢您的帮助和指导!

Answer 1

闪烁来自于以特定宽度从左侧跳到右侧的少数元素。由于浏览器环绕事物的方式，跳跃元素上方行的两半高度不同。当上一行的右侧变短 1 个像素时，跳跃元素向上移动到该空间。它的 float: left; 属性使其位于左侧“高 1 像素”大块的右侧。

要防止跳跃，请尝试将 clear: left; 添加到有问题的宽度处的跳跃元素。 (在我的测试中，将此添加到 第 761 行 的 .five 元素可防止它跳转。我在您的“中”媒体查询中尝试了它，因为您的布局只需要它在 min-width: 768px 和更宽。)

最终，由于浏览器四舍五入，您仍然会看到这些行之间有 1 像素的高度不匹配，但是通过清除问题区域中的 float 可以避免大问题。