Firefox中的CSS3翻转问题

Question

所以我尝试使用CSS创建一个简单翻转的菜单:

img.fade {
  opacity: 1;
  -webkit-transition: opacity .08s linear;
}

img.fade:hover {
  opacity: 0;
}

HTML:

<a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/home_btn_hover.png" alt="#" class="fade"  ><img style="position: absolute;  left: 0px;" src="img/home_btn.png" class="fade" /></span></a>

     <a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/explore_btn_hover.png" alt="#" class="fade"  ><img style="position: absolute;  left: 0px;" src="img/explore_btn.png" class="fade" /></span></a>

     <a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/dives_btn_hover.png" alt="#" class="fade"  ><img style="position: absolute;  left: 0px;" src="img/dives_btn.png" class="fade" /></span></a>

在safari/chrome中工作正常,但Firefox有一些我似乎无法解决的对齐问题.有任何想法吗？

在这里查看问题(确保使用firefox查看)

Answer 1

您的转换具有-webkit-供应商扩展:

-webkit-transition: opacity .08s linear;

因此Firefox无法识别它,因为Firefox运行在Gecko上,而不是WebKit.尝试添加-moz-transition,看看会发生什么(我自己没有使用CSS过渡).