CSS懸停過渡跨瀏覽器兼容性

我有一個純CSS動畫過渡的簡單語言選擇頁面。我做了一個jsFiddle here。CSS懸停過渡跨瀏覽器兼容性

它應該如何表現如下：

超過兩個（或更多）的語言選擇的一個用戶移動鼠標。
該語言選擇器向上轉換並達到完全不透明狀態。相關語言文本（例如，英語，Espa＆ntilde; ol）也會出現。
用戶可以點擊鏈接或鼠標移出，在這種情況下，轉換會反轉。

在Chrome中，它的行爲與預期相同。

在Firefox中，當我鼠標移過一個圖片，兩個都向上移動。

在Opera中，它的表現大部分與預期的一樣，但文字在向上移動後跳回。

我在試圖瞭解爲什麼這會在這些瀏覽器中發生，以及我如何在可能的情況下修復它。

在此的jsfiddle下跌的情況下，相關代碼：

HTML

<div id="container"><div id="cell"> 
    <div class="langcell"><a href="en/index.html"> 
     <img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png" /><br/><p>English</p></a> 
    </div> 
    <div class="langcell"><a href="es/index.html"> 
     <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png" /><br/><p>Espa&ntilde;ol</p></a> 
    </div> 
</div></div>

CSS

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 
#container { 
    width: 100%; 
    height: 100%; 
    display: table; 
} 
#cell { 
    display: table-cell; vertical-align: middle; text-align: center; 
} 
.langcell { 
    display: inline-block; 
    margin: auto 1em; 
} 
a { 
    position: relative; 
    top: 0; 
    -webkit-transition: top 0.25s; 
    -moz-transition: top 0.25s; 
    -o-transition: top 0.25s; 
    transition: top 0.25s; 
    color: black; 
    text-decoration: none; 
} 
a:hover { 
    top: -16pt; 
} 
a p { 
    font-size: 14pt; 
    font-weight: bold; 
    text-transform: uppercase; 
    font-family: Verdana, Geneva, sans-serif; 
    letter-spacing: 0.05em; 
    opacity: 0; 
    -webkit-transition: opacity 0.25s; 
    -moz-transition: opacity 0.25s; 
    -o-transition: opacity 0.25s; 
    transition: opacity 0.25s; 
} 
a:hover p { 
    opacity: 1; 
} 
a img { 
    opacity: 0.65; 
    -webkit-transition: opacity 0.25s; 
    -moz-transition: opacity 0.25s; 
    -o-transition: opacity 0.25s; 
    transition: opacity 0.25s; 
} 
a:hover img { 
    opacity: 1; 
}

來源

2013-03-14 wchargin

作品完全在我的Firefox – 2013-03-14 19:37:46

嘗試獲得最新的FF？ – Shouvik 2013-03-14 19:42:39

這不是解決您的問題的方法，但您應該知道，如果您從底部進入該元素，元素會向上移動，這會導致我的鼠標位於元素之外，因此它會向下移動。如果你不移動你的鼠標，它會永遠做到這一點。定位覆蓋整個空間的元素或重新考慮上下移動元素。 – MiniRagnarok 2013-03-14 19:51:55

我在Firefox奇怪的問題，（V12）以及它在哪裏移動這兩個元素的懸停。後來的版本（19v），它似乎解決了。

我認爲你的選擇器有什麼問題，以及mozilla如何解釋東西與webkit。看看這個jsfiddle是否適合你。

我真正做的是改變了很多a的選擇來.langcell，它似乎工作。我不得不重新調整了CSS來實現相同的風格，像嵌套.langcell a選擇。我有一個懷疑，它可能是由於a默認是線上而p是塊和img是內聯塊。

我不會撒謊，說我完全理解爲什麼這是發生在開始的，但只是在一般情況下，在元素賦予樣式類不只是一個偏好，它是更有效的渲染時間爲好。

CSS Selector Performance

代碼：

.langcell { 
     display: inline-block; 
     margin: auto 1em; 
     position: relative; 
     top: 0; 
     -webkit-transition: top 0.25s; 
     -moz-transition: top 0.25s; 
     -o-transition: top 0.25s; 
     transition: top 0.25s; 
    } 

    .langcell a { 
     color: black; 
     text-decoration: none; 
    } 
    .langcell:hover { 
     top: -16pt; 
    } 
    .langcell p { 
     font-size: 14pt; 
     font-weight: bold; 
     text-transform: uppercase; 
     font-family: Verdana, Geneva, sans-serif; 
     letter-spacing: 0.05em; 
     opacity: 0; 
     -webkit-transition: opacity 0.25s; 
     -moz-transition: opacity 0.25s; 
     -o-transition: opacity 0.25s; 
     transition: opacity 0.25s; 
    } 
    .langcell:hover p { 
     opacity: 1; 
    } 
    .langcell img { 
     opacity: 0.65; 
     -webkit-transition: opacity 0.25s; 
     -moz-transition: opacity 0.25s; 
     -o-transition: opacity 0.25s; 
     transition: opacity 0.25s; 
    } 
    langcell:hover img { 
     opacity: 1; 
    }

來源

2013-03-15 07:30:10

CSS3是相當新。許多瀏覽器中的許多功能仍然不兼容。Compatibility Chart

因此，如果您的客戶端有一些舊版本的瀏覽器（即使它們有一箇舊版本），那麼CSS3轉換將無法正常工作，這是有點令人沮喪的。

你最安全的賭注，使過渡是使用JavaScript或一些JavaScript庫它做如jQuery

來源

2013-03-15 07:38:43

CSS懸停過渡跨瀏覽器兼容性

回答

相關問題