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 存在一些我似乎无法修复的对齐问题。有什么想法吗？

Check out the issue here (make sure to view with firefox)

Answer 1

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

-webkit-transition: opacity .08s linear;

所以 Firefox 不会识别它，因为 Firefox 在 Gecko 上运行，而不是 WebKit。尝试添加 -moz-transition 看看会发生什么（我自己还没有玩过 CSS 过渡）。

Answer 2

原始图像（黄色）是内联的，而覆盖的图像是块状的，内联的由于下面的额外间距内联图像的位置略有不同，我认为它与基线间距或其他东西有关。

在任何情况下，似乎提供环绕跨度显示块可以解决问题。虽然我无法证明它在其他浏览器中的作用，但我只是做了一个快速的 Firebug hack。

如果这不能解决它，或者在其他浏览器中搞砸了，你基本上必须稍微重做整个事情，这样两个图像要么是块状的，要么是内联的（或者可能是内联块的，但重点是它们必须具有相同的显示样式）。

顺便说一句，必须说，非常好的网站设计:)

Answer 3

• -webkit- 前缀适用于基于 Webkit 的浏览器（safari、chrome）。
• -moz- 前缀适用于 Gecko 浏览器 (Firefox)。
• -o- 用于 Opera。
• -ms- 用于 Internet Explorer。 （我认为它只是 IE8+）

这些通常用于实验性 CSS 属性，它们通常在 CSS 草案中（目前主要是 CSS3）

尽管其中一些，即使它们仍在草稿中，也不再具有前缀。（例如：border-radius 在当前发布的 Webkit 浏览器和 Firefox 4 中不需要前缀，但仍然需要在 Firefox 3.6 中）

为了将来的兼容性，最好的解决方案是始终使用前缀，而不是将普通属性放在末尾。

例子：

img.fade {
    -webkit-transition: opacity .08s linear;
    -moz-transition: opacity .08s linear;
    -o-transition: opacity .08s linear; /* Haven't tested if it's supported in Opera though */
    /*If it is supported in the IE9 beta and need the prefix, u can also add -ms-transition: opacity .08s linear;*/
    transition: opacity .08s linear;
}