动画时的图像堆栈

Question

由于我动画了我的图像（悬停时会出现标题），因此在Chrome上查看时，图像会垂直堆叠而不是水平堆叠。这是网址 - http://goodyearsinc.com/releases

我尝试将“float：left”添加到img包装中，该包装适用于Firefox但不适用于Chrome。我正试着把头发拉出来。

这是带有css的jsfiddle - http://jsfiddle.net/8eTB2/

.item1, .item2, .item3, .item4
{
float:left;
} 
.img-wrap{
height:150px;
overflow:hidden;
position:relative;
float: left;
margin-right: 5px; 
}
.img-overlay{
background-color:#000;
bottom:0;
color:#fff;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:100%;
z-index:1000;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}

Answer 1

从

中删除float: left

.item1, .item2, .item3, .item4 {
    float: left;
}

Answer 2

尝试手动调整宽度，在Chrome上宽度为327px，其中firefox显示为465px。