在Firefox或IE中不会发生CSS转换

Question

我有一个简单的风格：

li, a {
    display: inline-block;
}
li {        
    transition: top 0.3s;
}
li:hover {
    position: relative; top: 3px; 
}

它应该与菜单中的某些图标一起使用，以便当您将鼠标悬停在菜单上时它们会下沉。它适用于Chrome，但不适用于IE或FF。这有什么可能是错的？

Answer 1

Firefox和IE要求您为动画属性指定初始属性。

所以：

li, a {
    display: inline-block;
}
li {        
    top: 0;        /* ADD THIS! */
    relative: 0;   /* This is important too or the item will pop back   
                      instead of transition*/
    transition: top 0.3s;
}
li:hover {
    position: relative; top: 3px; 
}