1
我有一个圆圈列表,当点击动画从上到下在原始圆圈内显示的div(.active)时。在Firefox中,动画div被屏蔽,但在Safari和Chrome中,可以看到动画div(.active),并且不会将其自己蒙蔽到父li。CSS WebKit溢出隐藏边框半径问题
我见过这个问题的其他几个帖子,但没有动画。
有没有其他人有这个问题或知道解决方案?
HTML
<ul class="circles">
<li class="image-1"><div class="active"><p>text text</p></div></li>
<li class="image-2"><div class="active"><p>text text</p></div></li>
<li class="image-3"><div class="active"><p>text text</p></div></li>
</ul>
CSS
ul.circles li{float:left; text-align: center; background-color:blue; height:186px; width:186px; border-radius:200px; border:10px solid white; overflow:hidden; display:block; position:relative;}
ul.circles li.image-1{background:url(image.png) 0 0 no-repeat;}
ul.circles li .active{background: rgb(154, 189, 44); position:relative; width:186px; height:186px; top:190px; border-radius:200px;}
JS
$('.circles li').toggle(function() {
$(this).find('div').animate({opacity: 0.8, top:'0'}, 1000)
},function() {
$(this).find('div').animate({opacity: 0.7, top:'190px'}, 1000);
});
看起来Chrome和Firefox的我一样,http://jsfiddle.net/PrZZc/ – Musa 2012-07-08 20:04:41
不适合我在Chrome中,我仍然可以在圈子底部看到.active div,因此它仍然没有被屏蔽。 – Jemes 2012-07-08 20:27:26
不幸的是在WebKit中发现错误(https://bugs.webkit.org/show_bug.cgi?id=72619)。有些建议可以帮助错误评论? – 2012-07-18 12:16:30