我有以下简单的 HTML 和 CSS。它在 Chrome 中运行良好。但不是FF。我的意思是transition在FF上不起作用。我正在使用 FF 18。我在 Google 和 SO 上搜索了这个问题并找到了一些黑客。但它们都不适合我的问题。请问有什么想法吗？
HTML：
<div class="image-list cf">
<figure>
<a href="javascript:return false;">
<img src="image-src-1"/>
</a>
<span>
<a href="javascript:return false;">File Name 1</a>
</span>
<span>
10 Images
</span>
</figure>
<figure>
<a href="javascript:return false;">
<img src="image-src-1"/>
</a>
<span>
<a href="javascript:return false;">File Name 1</a>
</span>
<span>
10 Images
</span>
</figure>
<-- and more -->
</div>
CSS：
/* images list
**********************************************************/
.image-list {}
.image-list figure {
float: right;
width: 180px;
border: 1px solid;
border-color: #aaa;
border-radius: 0;
box-shadow:
1px 0 0 #fff,
0 1px 0 #fff,
-1px 0 0 #fff,
0 -1px 0 #fff,
0 0 2px #000;
margin-right: 29px;
text-align: center;
padding: 10px 0;
background-color: #fff;
-webkit-transition: all .3s ease 0s;
-moz-transition: all .3s ease 0s;
-o-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}
.image-list figure:hover{
border-color: #666;
box-shadow:
1px 0 0 #fff,
0 1px 0 #fff,
-1px 0 0 #fff,
0 -1px 0 #fff,
0 0 10px #000;
}
[class="image-list"] figure:hover {
border-color: #666;
box-shadow:
1px 0 0 #fff,
0 1px 0 #fff,
-1px 0 0 #fff,
0 -1px 0 #fff,
0 0 10px #000;
}
.image-list figure a {}
.image-list figure a img {}
.image-list figure span {
display: block;
padding: 5px 0;
width: 160px;
margin: 0 auto;
overflow: hidden;
height: 1em;
}
.image-list figure span a {}