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

Question

出于某种原因，当较长的文本在图像下方环绕时，Firefox 会在 li 内向上移动(凸出)图像。但这不会发生在 Chrome 和 Safari 上。查看图片:

Chrome/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 已回答。感谢他的回答。 (我来晚了几分钟哈哈)