相同的CSS，选择器和图像，但不同的高度？

Question

我在Safari和Chrome中看到了一个非常奇怪的问题。不知何故，它在Firefox中运行得很好。

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

如果你向下滚动，你会注意到一个与其他人不同的电影。 ＆＃34;罪人＆＃34;视频开头的名称是＆＃34;到达日本＆＃34;这只是一个像素高度比其余像素高。

我已经对检查员进行了调查，但是所有其他人（相同的模板）的高度和宽度都是一样的，并且图像的高度和宽度都是100％相同。它可能是渲染问题，但它始终是相同的视频。

有人能想出来吗？

屏幕截图：

Answer 1

有问题的浮动物品是＆＃34;阻碍＆＃34;在它上面左边的文章上，它比其他文章略高。这就是浮动的问题。

我的建议是删除所有float: left;声明（对于桌面和媒体查询中的各种实例也有两个）并使用display: inline-block代替，可能右边距缩小，比方说，0.5％（虽然这些有点不准确）。

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

或者您可以使用flexbox，这是现代的方法，但尚未全面支持。

Answer 2

原因是视频名称中包含日文字符。无论出于何种原因，它们渲染得稍大，使.ellipsis框大1px。

正如ralph.m所提到的，我会然后显示：inline-block;并删除浮动，然后设置margin-right: 23.8%;