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

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

在上述浏览器之一中查看此URL：

如果你向下滚动，你会注意到一个videothumb浮动，它与其他的非常不同。“罪人”是以“抵达日本”为首的视频，它的高度仅比其他视频高一个像素

我已经查看了inspector，但所有内容都与其他内容一样高和宽（它是同一个模板），并且图像的高度和宽度都是100%相同的。这可能是一个渲染问题，但它始终是同一个视频

有人知道吗

---

屏幕截图：

所讨论的浮动文章在其上方左侧的文章上“卡住”，该文章略高于其他文章。这就是浮动的问题

我的建议是删除所有的

float:left声明（桌面和媒体查询中的各种实例也有两个），并使用
display:inline block
代替，可能会减少右边距，比如说0.5%（尽管这些有点不准确）

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

或者你也可以使用flexbox，这是一种现代的方式，尽管还没有得到全面的支持。
原因是视频名称中有日语字符。无论出于何种原因，它们都会渲染得稍大一些，从而使
.ellission
框变大1px

正如ralph.m所提到的，我会制作并显示：内联块；移除浮动，然后设置
右边距：23.8%
我觉得它们在Chrome上很好看。介意发布你的问题截图吗？是的，在Mac上的Safari中，我看起来也不错-图像的尺寸也一样。我已经尝试了我知道的每个浏览器，但无法复制问题，你能给出截图吗？另外，您使用的浏览器版本是什么？+您使用的操作系统是什么？更新了屏幕截图！你将如何在flexbox中制作它？我们不支持IE8，所以这是有可能的，虽然我们个人需要旧的flexbox型号用于IE9，但我认为flexbox太新了，特别是如果您需要支持旧的IE。使用旧语法对我来说太混乱了。这是
内联块
非常方便的地方，也是我在这些情况下的选择。你是说视频课吗？看起来我实际上可以毫无问题地移除浮标，所以这已经完成了。但是我不知道你说的保证金是什么意思，对吗？除非我误解了，否则会造成巨大的差距