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

回答

相关问题