0

以下の単純な HTML と CSS があります。Chromeで問題なく動作します。でもFFではない。つまり、transitionFFでは機能しません。私は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 {}
4

1 に答える 1

0

移行機能をサポートしていない古いバージョンのブラウザを使用している可能性があります。ページの最後にある移行サポートチャートについては、以下のリンクを参照してください

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
于 2013-03-01T06:36:41.870 に答える