CSS WebKit溢出隱藏邊框半徑問題

我有一個圓圈列表，當點擊動畫從上到下在原始圓圈內顯示的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); 
});

來源

2012-07-08 Jemes

看起來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

莫比這可以幫助，

如果圈沒有包含可點擊的，你可以在上面放置一個透明的圖像，我用了一個形象我在谷歌找到，所以我不得不鏈接改變寬度和高度。

http://jsfiddle.net/PrZZc/22/

黑色邊框與圖像來，所以你必須創建自己的

來源

2012-07-24 08:17:51 Gijs

CSS WebKit溢出隱藏邊框半徑問題

回答

相關問題