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

CSS3過渡問題

回答

相關問題