css - Firefox 用更长的文字向上移动图像

Question

出于某种原因li，当较长的文本在图像下方换行时，Firefox 正在向上移动（碰撞）图像。但这不会发生在 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 已经回答了。感谢他的回答。（我迟到了几分钟哈哈）