动画时图像堆栈答案

【问题标题】：Images stack when animated动画时图像堆栈
【发布时间】：2013-12-03 05:43:42
【问题描述】：

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

我尝试将“float:left”添加到适用于 Firefox 但不适用于 Chrome 的 img 包装。我正在拔头发试图解决它。

这是带有 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;
}

【问题讨论】：

欢迎使用 Stackoverflow，请向我们提供与问题相关的代码。
对不起，我是 Stackoverflow 的新手。我已经用相关的 css 编辑了我的答案。不会再发生了:)
为了以后的参考，只贴出与问题相关的代码。如果你有很多相关的代码，那么你可以使用这个很棒的工具，jsfiddle.net。
只要学会这个没问题！ :]

标签： css image google-chrome

【解决方案1】：

从

中删除float: left

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

【讨论】：

【解决方案2】：

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

【讨论】：