html - 在 safari+chrome 中的 css3 动画后链接不起作用

Question

我有一个链接环绕在两个 div 上，它们在 :hover 上动画。在 Firefox 中，链接可以正常工作并跳转到正确的锚点。但在 Safari 和 Chrome 中，链接只有在 < a> 元素内的两个 div 中的第一个被点击时才有效。

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

这是一个有效的 jsFiddle：http: //jsfiddle.net/26HgM/6/

谁能告诉我为什么它不能正常工作？谢谢！

score 1 · Accepted Answer

问题是您正在旋转它，<a>因此它向后面向 webkit 解释为不再是可以交互的链接。

您可以做的一件事是不要旋转链接本身，而是在链接内添加一个容器 div 并旋转它。

score 0 · Accepted Answer

问题是这<a>是一个内联元素，<div>而是一个块级元素。根据 HTML 标准，内联元素不能包含块级元素，但浏览器无论如何都会尝试这样做——所以我们得到了错误的实现。你不得不：

2 回答 2