CSS3过渡问题

所以我试着用CSS来创建简单变换菜单：CSS3过渡问题

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 /铬OK，但Firefox是有一些调整问题我似乎无法修复。有任何想法吗？

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

alt text

来源

2011-01-20 Thomas

原始图像（黄色）是内联的，而重叠的一个是块，内联一个得到略微不同的定位，由于额外的间距低于内嵌图像得到的，我认为它有与基线间距或某事有关。

在任何情况下，似乎给包装范围显示块修复问题。尽管我无法证实在其他浏览器中的功能，但我只是做了一个快速的Firebug攻击。

如果这不能解决它，或者在其他浏览器中混淆，基本上必须稍微重做整个事情，以便两个图像都是块或内联（或内嵌块，也许，但重点是他们必须具有相同的显示风格）。

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

来源

2011-01-20 19:54:28 ilia

谢谢，我很高兴你喜欢这个设计;）BTW你解决得很好，谢谢你真正阅读我的问题。 – Thomas 2011-01-25 04:56:56

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

-webkit-transition: opacity .08s linear;

所以Firefox将不承认它，因为火狐的Gecko上，不是WebKit的运行。尝试添加-moz-transition，看看会发生什么（我自己还没有玩过CSS转换）。

来源

2011-01-20 10:20:15 BoltClock

那么过渡工作，但对齐关闭。我尝试添加-moz-，但它不会影响对齐问题。我开始认为这是一个与js相关的冲突，但我不知道发生了什么。我添加了一个链接到OP – Thomas 2011-01-20 10:44:13

-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; 
}

来源

2011-01-20 10:45:49 Dan

回答

相关问题