safari + chrome中的css3動畫後鏈接無法正常工作+ chrome

我有一個包含兩個div的鏈接，這兩個div的動畫是：hover。在Firefox中，鏈接正常工作並跳轉到正確的錨點。但在Safari和Chrome瀏覽器中，鏈接僅在單擊< a> -lelement中的兩個div的第一個時才起作用。safari + chrome中的css3動畫後鏈接無法正常工作+ chrome

<li> 
<a href="#work" class="inaktiv"> 
<div class="work1">a</div> 
<div class="work2">b</div>   
</a> 
</li>

這裏是一個工作的jsfiddle：http://jsfiddle.net/26HgM/6/

誰能告訴我，爲什麼它不能正常工作？謝謝！

來源

2013-08-18 Felix Schneider

問題是你正在旋轉<a>，所以它面臨倒退，這是因爲webkit被解釋爲不再是可以交互的鏈接。

你可以做的一件事就是不要旋轉鏈接本身，在鏈接中添加一個容器div並旋轉它。

http://jsfiddle.net/26HgM/6/

來源

2013-08-18 17:07:20

我已經試過了。也不起作用。 http://jsfiddle.net/26HgM/7/ –

另一件事是：懸停不能在旋轉的東西。這就是爲什麼我選擇了.inaktiv：hover .container {transform：rotateY（-90deg）; } –

只要我能告訴http://jsfiddle.net/26HgM/9/ –

的問題是，<a>是內嵌元素，而<div>是塊級元素。內聯元素不能包含根據HTML標準的塊級元素，但瀏覽器無論如何都試圖這樣做 - 所以我們得到了bug的實現。您將有：

放的div中的鏈接，並有兩個環節，或
使容器一個div並使其可點擊使用Javascript

這裏有更多的塊級vs inline：http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm

來源

2013-08-18 17:29:31 rvighne

標籤在html5中是嵌入塊 –

safari + chrome中的css3動畫後鏈接無法正常工作+ chrome

回答

相關問題