html - 相同的 CSS、选择器和图像但高度不同？

Question

我在 Safari 和 Chrome 中发现了一个非常奇怪的问题。它在 Firefox 中以某种方式工作得很好。

在上述浏览器之一中查看此 URL:https://musik.dk/therollingstones/videoer

如果向下滚动，您会注意到 float 的视频拇指与其他视频拇指非常不同。 “罪人”是以名称“Arrive in Japan”开头的视频，它只比其他视频高一个像素。

我查看了检查器，但所有内容的高度和宽度都与其他所有内容(相同的模板)一样，并且图像的高度和宽度 100% 相同。这可能是渲染问题，但始终显示相同的视频。

谁能算出来？

屏幕截图:

Answer 1

有问题的 float 文章“缠绕”在它上方左侧的文章上，该文章比其他文章略高。这就是 float 的问题。

我的建议是删除所有 float: left; 声明(有两个用于桌面和媒体查询中的各种实例)并使用 display: inline-block 相反，也许右边距减少了 0.5%(尽管这些有点不准确)。

您可以将 text-align: justify 应用于所有这些文章的容器，而不是右边距。如果没有 4 篇文章，那只会弄乱最后一行，但这也是可以修复的。

或者您可以使用 flexbox，这是执行此操作的现代方法，但尚未得到全面支持。