Question

我有以下简单的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 {}

Answer 1

可能是您使用的旧版浏览器不支持转换功能。请参阅以下链接，了解页面末尾的过渡支持图表

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

转换不适用于FF

1 个答案: