过渡:top不适用于Firefox和Opera

Question

我就是无法让它工作。我确信这一定是可能的。

这只是一个例子。我希望内部div向下移动并产生过渡效果。

<div id="outer">
    <div id="inner"></div>
</div>
<style type="text/css">       
    #outer
    {
        width:200px; 
        height:200px; 
        background-color:Yellow;
    }
    #inner
    {
        position:relative;
        -webkit-transition: top .4s ease-out;
        -moz-transition: top .4s ease-out;
        width:50px; 
        height: 100px; 
        background-color:Red;
    }
    #inner:hover
    {
        top:20px;
    }
</style>

它在Chrome中运行良好，但在Firefox 14和Opera 12中则不然（分别带有-o转换）。我尝试了唯一的"过渡"属性，但没有效果。

Answer 1

您不能从auto转换到20px。在#inner {}中将其显式设置为0px。