Firefox使用更长的文本来移动图像

Question

出于某种原因，当图像下方的文本较长时，Firefox会在li内向上移动（碰撞）图像。但Chrome和Safari不会出现这种情况。见图：

铬/ Safari浏览器：

火狐：

不确定为什么会这样做。 这也是我的CSS：

.crew ul li {
display: inline-block;
list-style: none;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 75px;
font-size: 1.1em;
font-style: italic;
color: #71767d;
font-weight: 300;
position: relative;
width: 117px;
height: 117px;
}

.crew ul li img {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position: absolute;
left: 0;
}

.crew ul li img.top:hover {
opacity: 0;
cursor: pointer;
}

.crew ul li p {
margin-top: 120px;
}

我已经尝试剥离嵌套元素中的所有边距，但仍然表现得很傻。有什么建议吗？

Answer 1

将vertical-align: top; 或 vertical-align: bottom;添加到.crew ul li。

编辑：用户Adrift已经回答了问题。感谢他的回答。 （我太迟了几分钟哈哈）