CSS轉換將無法正常工作在Firefox

我工作的一個過渡onmouse懸停的股利。效果應該是從div頂部到中間的文本合併，而div則從正方形變爲圓形。問題是，如果在FireFox中正方形到圓形效果起作用，但不是從頂部下來的文本，則此效果僅適用於Chrome和IE。有沒有人遇到過這個，有人可以告訴我爲什麼會發生這種情況？我的按鈕的代碼都低於：CSS轉換將無法正常工作在Firefox

#navigation{ 
font-size:14px; 
float:left; 
left:0; 
height:100%; 
position:static; 
width:65px; 
margin-top:6.5%; 
margin-left:10%; 
} 


#tab1{ 
float:left; 
width:65px; 
height:65px; 
left:0; 
transition:all 1s, all 1.1s; 
-webkit-transition:all 1s, all 1.1s; 
-moz-transition:all 1s, all 1.1s; 
margin-top:40px; 
box-shadow: 1px 1px 2px #000; 
} 

.tab1h{ 
width:65px; 
height:65px; 
visibility:none; 
position: absolute; 
opacity: 0; 
vertical-align: middle; 
text-align:center; 
transition:all 1s, all 1.1s; 
-webkit-transition:all 1s, all 1.1s; 
-moz-transition:all 1s, all 1.1s; 
} 


#tab1:hover { 
border-radius:50%; 
overflow:hidden; 
visibility:none; 
} 


#tab1:hover > .tab1h { 
visibility:visible; 
float:left; 
opacity:1; 
padding-top:20px; 
} 
    <div id="navigationi"> 
      <a href="index.html" > 
       <div id="tab1" style="background-color:#f5f4f0; font-size:14px;"> 
        <div class="tab1h"> 
        Home 
        </div> 
       </div> 
      </a> 
</div>

因此，這裏是我的HTML和CSS也在這裏是一個的jsfiddle http://jsfiddle.net/MFcS5/。

謝謝，維克多

來源

2014-01-29 Victor

你給我們的HTML是無效的。請創建一個JSFiddle來演示你的問題。 - > http://jsfiddle.net/ – Josiah

對不起忘了關閉一個div，但這裏是的jsfiddle http://jsfiddle.net/MFcS5/。謝謝 – Victor

什麼是過渡'所有1s，全部1.1s'應該這樣做？ –

去除#tab1:hoveroverflow:hidden解決了這個問題。 Here's a fiddle顯示它在Firefox（以及Chrome和IE）中按預期工作。

它可以通過this bug造成的：「CSS轉換不會啓動由於祖先或自我的幀重建......」;改變overflow原因#tab1在同一時間被重畫作爲過渡應該開始，所以它的子.tab1h沒有得到過渡。

來源

2014-01-29 18:09:23 Trojan

謝謝老兄，似乎工作，沒想到的是，我從來沒有見過之所以這樣做，但確確實實有用。 – Victor

CSS轉換將無法正常工作在Firefox

回答

相關問題