2013-02-28 46 views
0

我有以下簡單的HTML和CSS。它工作在Chrome罰款。但不是FF。我的意思是transition在FF上不起作用。我使用的是FF 18.我在Google和SO上搜索了這個問題並找到了一些黑客。但是他們沒有一個適合我的問題。請任何想法嗎?過渡不適用於FF

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 {} 
+0

請描述什麼是不能在Firefox工作和您所使用的Firefox版本。 – showdev 2013-02-28 19:51:34

+0

適合我的FireFox – 2013-02-28 20:27:48

回答

0

可能是你使用的是多內斯不支持過渡functinality瀏覽器的舊版本。見下面的鏈接過渡支持圖表在

頁面

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

末這裏是一些代碼王氏支持意見

-webkit-transition: all .3s linear; // webkit browsers like chrome, safari support code 
-moz-transition: all .3s linear;  // mozilla support code 
-o-transition: all .3s linear;   // opera support code 
transition: all .3s linear;   // css3 code 
相關問題